improvement(tabs): Fix tab bar indicator precedence issue & Icon size…

… css properties are applied to icon PiperOrigin-RevId: 482190989
material-components · Oct 20, 2022 · e66bc9f · e66bc9f
1 parent ee40081
commit e66bc9f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/packages/mdc-tab-bar/_tab-bar-theme.scss b/packages/mdc-tab-bar/_tab-bar-theme.scss
@@ -141,12 +141,12 @@ $secondary-navigation-tab-light-theme: (
     @include tab-theme.primary-navigation-tab-theme-styles(
       map-ext.pick($theme, map.keys(tab-theme.$primary-light-theme)...)
     );
-  }
 
-  .mdc-tab-indicator {
-    @include tab-indicator-theme.theme-styles(
-      map-ext.pick($theme, map.keys(tab-indicator-theme.$light-theme)...)
-    );
+    .mdc-tab-indicator {
+      @include tab-indicator-theme.theme-styles(
+        map-ext.pick($theme, map.keys(tab-indicator-theme.$light-theme)...)
+      );
+    }
   }
 }
 
@@ -155,11 +155,11 @@ $secondary-navigation-tab-light-theme: (
     @include tab-theme.secondary-navigation-tab-theme-styles(
       map-ext.pick($theme, map.keys(tab-theme.$secondary-light-theme)...)
     );
-  }
 
-  .mdc-tab-indicator {
-    @include tab-indicator-theme.theme-styles(
-      map-ext.pick($theme, map.keys(tab-indicator-theme.$light-theme)...)
-    );
+    .mdc-tab-indicator {
+      @include tab-indicator-theme.theme-styles(
+        map-ext.pick($theme, map.keys(tab-indicator-theme.$light-theme)...)
+      );
+    }
   }
 }
diff --git a/packages/mdc-tab/_tab-theme.scss b/packages/mdc-tab/_tab-theme.scss
@@ -256,6 +256,8 @@ $custom-property-prefix: 'tab';
   @include _divider-color(map.get($theme, divider-color));
   @include _divider-height(map.get($theme, divider-height));
 
+  @include _icon-size(map.get($theme, with-icon-icon-size));
+
   @include _active-icon-color(
     (
       default: map.get($theme, with-icon-active-icon-color),
@@ -543,9 +545,11 @@ $custom-property-prefix: 'tab';
 }
 
 @mixin _icon-size($size) {
-  @include theme.property('width', $size);
-  @include theme.property('height', $size);
-  @include theme.property('font-size', $size);
+  .mdc-tab__icon {
+    @include theme.property('width', $size);
+    @include theme.property('height', $size);
+    @include theme.property('font-size', $size);
+  }
 }
 
 @mixin _label-text-font-family($font-family) {