fix(tabs): icon color isn't correct when the tab item is not active (#9620)

Closes #9536

Author: olegoode

src/components/tabs/demoStaticTabs/index.html

@@ -22,6 +22,20 @@
           data.selectedIndex = 2;
         </md-tab-body>
       </md-tab>
+      <md-tab id="tab4">
+        <md-tab-label><md-icon md-svg-icon="communication:phone"></md-icon></md-tab-label>
+        <md-tab-body>
+          View for Item #4 <br/>
+          data.selectedIndex = 3;
+        </md-tab-body>
+      </md-tab>
+      <md-tab id="tab5">
+        <md-tab-label><md-icon md-svg-icon="favorite"></md-icon></md-tab-label>
+        <md-tab-body>
+          View for Item #5 <br/>
+          data.selectedIndex = 4;
+        </md-tab-body>
+      </md-tab>
     </md-tabs>
   </md-content>
 

src/components/tabs/demoStaticTabs/readme.html

@@ -1 +1 @@
-<p>The Static Tabs demo how to disable and bottom-align tabs:</p>
+<p>The Static Tabs demo shows how to disable and bottom-align tabs:</p>

src/components/tabs/demoStaticTabs/script.js

@@ -2,7 +2,12 @@
   'use strict';
 
   angular
-      .module('tabsDemoStaticTabs', ['ngMaterial'] )
+      .module('tabsDemoIconTabs', ['ngMaterial'] )
+      .config(function($mdIconProvider) {
+        $mdIconProvider
+          .iconSet('communication', 'img/icons/sets/communication-icons.svg')
+          .icon('favorite', 'img/icons/favorite.svg');
+      })
       .controller('AppCtrl', AppCtrl);
 
   function AppCtrl ( $scope ) {

src/components/tabs/demoStaticTabs/style.scss

@@ -1,13 +1,24 @@
-md-tab-content {
-  padding: 25px;
-  &:nth-child(1) {
-    background-color: #42A5F5;
-  }
-  &:nth-child(2) {
-    background-color: #689F38;
-  }
-  &:nth-child(3) {
-    background-color: #26C6DA;
+md-content {
+  md-tabs {
+    border: 1px solid #e1e1e1;
+    md-tab-content {
+      padding: 25px;
+      &:nth-child(1) {
+        background-color: #cfd8dc;
+      }
+      &:nth-child(2) {
+        background-color: #ffb74d;
+      }
+      &:nth-child(3) {
+        background-color: #ffd54f;
+      }
+      &:nth-child(4) {
+        background-color: #aed581;
+      }
+      &:nth-child(5) {
+        background-color: #00897b;
+      }
+    }
   }
 }
 .after-tabs-area {

src/components/tabs/tabs-theme.scss

@@ -4,7 +4,9 @@
     > md-tabs-canvas {
       > md-pagination-wrapper {
         > md-tab-item:not([disabled]) {
-          color: '{{primary-100}}';
+          &, md-icon {
+            color: '{{primary-100}}';
+          }
           &.md-active, &.md-focused {
             &, md-icon {
               color: '{{primary-contrast}}';
@@ -24,7 +26,9 @@
     > md-tabs-canvas {
       > md-pagination-wrapper {
         > md-tab-item:not([disabled]) {
-          color: '{{warn-100}}';
+          &, md-icon {
+            color: '{{warn-100}}';
+          }
           &.md-active, &.md-focused {
             &, md-icon {
               color: '{{warn-contrast}}';
@@ -44,7 +48,9 @@
     > md-tabs-canvas {
       > md-pagination-wrapper {
         > md-tab-item:not([disabled]) {
-          color: '{{accent-A100}}';
+          &, md-icon {
+            color: '{{accent-A100}}';
+          }
           &.md-active, &.md-focused {
             &, md-icon {
               color: '{{accent-contrast}}';