(fix) address button icon

apps/block_scout_web/assets/css/_mixins.scss

@@ -171,11 +171,13 @@
 }
 
 @mixin square-icon-button($color, $dimensions) {
+  align-items: center;
   border: 1px solid $color;
   border-radius: 2px;
   cursor: pointer;
-  display: block;
+  display: flex;
   height: $dimensions;
+  justify-content: center;
   transition: all 0.15s;
   width: $dimensions;
 

apps/block_scout_web/assets/css/app.scss

@@ -115,6 +115,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/modal_stake";
 @import "components/btn_copy";
 @import "components/btn_qr";
+@import "components/btn_address_card";
 @import "components/btn_dropdown_line";
 @import "components/transaction";
 @import "components/api";

apps/block_scout_web/assets/css/components/_btn_address_card.scss

@@ -0,0 +1,11 @@
+$btn-address-card-icon-color: $primary !default;
+$btn-address-card-icon-dimensions: 31px !default;
+
+.btn-address-card-icon {
+  @include square-icon-button($btn-address-card-icon-color, $btn-address-card-icon-dimensions);
+
+  svg {
+    height: 22px;
+    width: 22px;
+  }
+}

apps/block_scout_web/lib/block_scout_web/templates/address/overview.html.eex

@@ -39,10 +39,21 @@
                 </span>
               </span>
               <%= if validator_metadata = primary_validator_metadata(@address) do %>
-                <span data-toggle="modal" data-target="#validatorModal">
+                <span
-                  <button type="button" class="icon-link"  data-toggle="tooltip" data-placement="top" title="<%= gettext("Validator Info") %>" aria-label="<%= gettext("Show Validator Info") %>">
+                  class="overview-title-item"
-                    <i class="fas fa-address-card"></i>
+                  data-target="#validatorModal"
-                  </button>
+                  data-toggle="modal"
+                >
+                  <span
+                    aria-label='<%= gettext("Show Validator Info") %>'
+                    class="btn-address-card-icon"
+                    data-placement="top"
+                    data-toggle="tooltip"
+                    title='<%= gettext("Validator Info") %>'
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="32" height="32">
+                    <path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"></path></svg>
+                  </span>
                 </span>
               <% end %>
             </span>