update icon sizing to use width and height rather than a single variable

Author: rileyajones

tensorboard/webapp/theme/_tb_theme.template.scss

@@ -308,38 +308,37 @@ $tb-dark-theme: map_merge(
       --mdc-slider-inactive-track-height: 2px;
     }
 
-    ::ng-deep :not(mat-calendar) {
-      a,
-      button.mat-mdc-button-base {
-        --tb-icon-size: 24px;
-        --mdc-text-button-label-text-tracking: normal;
-        --mdc-filled-button-label-text-tracking: normal;
-        --mdc-outlined-button-label-text-tracking: normal;
-        --mdc-protected-button-label-text-tracking: normal;
-
-        &[mat-icon-button].mat-mdc-icon-button {
-          width: 40px;
-          height: 40px;
-          display: inline-flex;
-          justify-content: center;
-          align-items: center;
-
-          .mat-mdc-button-touch-target {
-            height: 100%;
-            width: 100%;
-          }
+    a,
+    button.mat-mdc-button-base {
+      --tb-icon-width: 24px;
+      --tb-icon-height: 24px;
+      --mdc-text-button-label-text-tracking: normal;
+      --mdc-filled-button-label-text-tracking: normal;
+      --mdc-outlined-button-label-text-tracking: normal;
+      --mdc-protected-button-label-text-tracking: normal;
+
+      &[mat-icon-button].mat-mdc-icon-button {
+        width: 40px;
+        height: 40px;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        .mat-mdc-button-touch-target {
+          height: 100%;
+          width: 100%;
         }
+      }
 
-        mat-icon.mat-icon {
-          flex-shrink: 0;
-        }
+      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);
-        }
+      mat-icon.mat-icon,
+      svg {
+        width: var(--tb-icon-width);
+        height: var(--tb-icon-height);
+        line-height: var(--tb-icon-height);
       }
     }
   }

tensorboard/webapp/widgets/data_table/header_cell_component.scss

@@ -55,7 +55,8 @@ $_icon_padding: 4px;
     &.context-menu-container {
       width: $_icon_size + $_icon_padding;
       height: $_icon_size + $_icon_padding;
-      --tb-icon-size: #{$_icon_size};
+      --tb-icon-width: #{$_icon_size};
+      --tb-icon-height: #{$_icon_size};
       border-radius: 5px;
       font-size: 12px;
       padding: $_icon_padding;

tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view.scss

@@ -34,7 +34,8 @@ text {
   width: 100%;
 
   .extent-edit-button {
-    --tb-icon-size: 16px;
+    --tb-icon-width: 16px;
+    --tb-icon-height: 16px;
     height: 24px;
     position: absolute;
     right: 5px;