fix(tabs): Fix tab img icon styling. (#5041)

packages/mdc-tab/_mixins.scss

@@ -40,6 +40,7 @@
 // from the other tah styles. It is recommended that most users use `mdc-tab-core-styles` instead.
 @mixin mdc-tab-without-ripple($query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
 
   // postcss-bem-linter: define tab
 
@@ -57,9 +58,33 @@
     @include mdc-tab__content_($query);
   }
 
-  .mdc-tab__text-label,
+  .mdc-tab__text-label {
+    @include mdc-feature-targets($feat-animation) {
+      transition: 150ms color linear;
+    }
+
+    @include mdc-feature-targets($feat-structure) {
+      display: inline-block;
+      // Setting line-height here overrides the line-height from the typography
+      // mixin above. The line-height needs to be overridden so that the spacing
+      // between the text label and the icon as well as the text label and the
+      // bottom of the tab remain the same.
+      line-height: 1;
+      z-index: 2;
+    }
+  }
+
   .mdc-tab__icon {
-    @include mdc-tab__content-child_($query);
+    @include mdc-feature-targets($feat-animation) {
+      transition: 150ms color linear;
+    }
+
+    @include mdc-feature-targets($feat-structure) {
+      width: $mdc-tab-icon-size;
+      height: $mdc-tab-icon-size;
+      font-size: $mdc-tab-icon-size;
+      z-index: 2;
+    }
   }
 
   .mdc-tab--stacked {
@@ -237,25 +262,6 @@
   }
 }
 
-@mixin mdc-tab__content-child_($query: mdc-feature-all()) {
-  $feat-animation: mdc-feature-create-target($query, animation);
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-animation) {
-    transition: 150ms color linear;
-  }
-
-  @include mdc-feature-targets($feat-structure) {
-    display: inline-block;
-    // Setting line-height here overrides the line-height from the typography
-    // mixin above. The line-height needs to be overridden so that the spacing
-    // between the text label and the icon as well as the text label and the
-    // bottom of the tab remain the same.
-    line-height: 1;
-    z-index: 2;
-  }
-}
-
 @mixin mdc-tab--stacked_($query: mdc-feature-all()) {
   $feat-structure: mdc-feature-create-target($query, structure);