diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ng.html
index 78e3e143cc..e3dc2f57ed 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.ng.html
@@ -32,7 +32,6 @@
   <span class="controls">
     <button
       mat-icon-button
-      class="pin-button"
       i18n-aria-label="A button to pin a card."
       aria-label="Pin card"
       [attr.title]="isPinned ? 'Unpin card' : 'Pin card'"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
index 7341ba8411..d76360a2b6 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_component.scss
@@ -55,10 +55,6 @@ $_title-to-heading-gap: 12px;
   }
 }
 
-.pin-button mat-icon {
-  height: 18px;
-}
-
 .run {
   grid-area: run;
   display: flex;
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html
index 8cd5bb626c..6279cc4acb 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.ng.html
@@ -30,7 +30,6 @@
     <span class="controls">
       <button
         mat-icon-button
-        class="pin-button"
         i18n-aria-label="A button to pin a card."
         aria-label="Pin card"
         [attr.title]="isPinned ? 'Unpin card' : 'Pin card'"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
index 677d3bf5c3..99f6477de8 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
@@ -70,10 +70,6 @@ $_tick_width: 14px;
   overflow: hidden;
 }
 
-.pin-button mat-icon {
-  height: 18px;
-}
-
 .run {
   align-self: baseline;
   display: flex;
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
index adcceda332..11113af833 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ng.html
@@ -44,7 +44,6 @@
       </button>
       <button
         mat-icon-button
-        class="pin-button"
         i18n-aria-label="A button to pin a card."
         aria-label="Pin card"
         [attr.title]="isPinned ? 'Unpin card' : 'Pin card'"
diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
index 13939a426f..93213ec306 100644
--- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
+++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
@@ -79,10 +79,6 @@ $_data_table_initial_height: 100px;
   overflow: hidden;
 }
 
-.pin-button mat-icon {
-  height: 18px;
-}
-
 .controls {
   @include metrics-card-controls;
   flex-shrink: 0;
diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss
index 60a85d5da0..9c921ec0fc 100644
--- a/tensorboard/webapp/theme/_tb_theme.template.scss
+++ b/tensorboard/webapp/theme/_tb_theme.template.scss
@@ -291,6 +291,37 @@ $tb-dark-theme: map_merge(
     }
   }
 
+  body,
+  body.dark-mode {
+    a,
+    button {
+      &[mat-icon-button].mat-mdc-icon-button {
+        width: 40px;
+        height: 40px;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        --tb-icon-size: 24px;
+
+        .mat-mdc-button-touch-target {
+          height: 100%;
+          width: 100%;
+        }
+
+        mat-icon.mat-icon {
+          flex-shrink: 0;
+        }
+
+        mat-icon.mat-icon,
+        svg {
+          width: var(--tb-icon-size);
+          height: var(--tb-icon-size);
+          line-height: var(--tb-icon-size);
+        }
+      }
+    }
+  }
+
   // Cannot use `tb-dark-theme` as :host-context in the global stylesheet is
   // meaningless.
   body.dark-mode {
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index 704f98ccda..8288acb0b4 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -18,6 +18,7 @@ limitations under the License.
 
 $_accent: map-get(mat.get-color-config($tb-theme), accent);
 $_icon_size: 12px;
+$_icon_padding: 4px;
 
 :host {
   display: table-cell;
@@ -40,16 +41,6 @@ $_icon_size: 12px;
   }
 }
 
-.sorting-icon-container,
-.context-menu-container {
-  width: $_icon_size + 4px;
-  height: $_icon_size + 4px;
-  border-radius: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .cell {
   align-items: center;
   display: flex;
@@ -60,6 +51,18 @@ $_icon_size: 12px;
     line-height: 1;
   }
 
+  button[mat-icon-button].mat-mdc-icon-button {
+    &.sorting-icon-container,
+    &.context-menu-container {
+      width: $_icon_size + $_icon_padding;
+      height: $_icon_size + $_icon_padding;
+      --tb-icon-size: #{$_icon_size};
+      border-radius: 5px;
+      font-size: 12px;
+      padding: $_icon_padding;
+    }
+  }
+
   .sorting-icon-container {
     ::ng-deep path {
       fill: unset;
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
index d60fe1c6d1..1a5c34f7cc 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.ng.html
@@ -33,7 +33,7 @@
       </g>
     </svg>
     <button
-      [class.extent-edit-button]="true"
+      class="extent-edit-button"
       [class.extent-edit-menu-opened]="editMenuOpened"
       mat-icon-button
       #matMenuTrigger="matMenuTrigger"
diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
index 0030b9aa3b..5e0383f0bc 100644
--- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
+++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss
@@ -32,6 +32,17 @@ text {
   display: flex;
   height: 100%;
   width: 100%;
+
+  .extent-edit-button {
+    --tb-icon-size: 16px;
+    height: 24px;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    visibility: hidden;
+    width: 24px;
+    padding: 0;
+  }
 }
 
 .major,
@@ -112,24 +123,6 @@ text {
   }
 }
 
-.extent-edit-button {
-  background-color: mat.get-color-from-palette(mat.$gray-palette, 200);
-  font-size: 0;
-  height: 24px;
-  line-height: 24px;
-  position: absolute;
-  right: 5px;
-  top: 5px;
-  visibility: hidden;
-  width: 24px;
-
-  mat-icon {
-    height: 16px;
-    width: 16px;
-    line-height: 16px;
-  }
-}
-
 .extent-edit-input {
   align-items: center;
   column-gap: 5px;