Material: tabs: icon color isn't correct when the tab item is not active

[EladBezalel]

When the tab isn't focused the icon color isn't the same as the text color.
CodePen

linking #9502

[keturn]

The approach used in #9620 fixes this for tabs specifically, but it stems from the fact that md-icon explicitly sets a foreground color instead of inheriting that from its parent.

Tabs aren't the only place where this is a problem. For another example, see the front page of Angular-Material's own documentation:

To get the icons to have the same :focus and :hover colors as the text on the cards, they have to explicitly specify selectors for md-icon and use !important, which seems like a bad pattern.

From docs.css:

ul.buckets li a:hover,
ul.buckets li a:focus,
ul.buckets li a:hover md-icon,
ul.buckets li a:focus md-icon {
  color: #106CC8 !important;
  background-color: #ebebeb !important;
}

This was also raised in #2551. Which has been closed, but I think erroneously, as the commit that closed it 92aff33 does not allow icons to inherit color as it claims to.

It did close it for buttons in disabled state specifically (#2434), again, by putting md-icon specific code into md-button styles, in the same way that #9620 does for tabs, but I think that having every component that might possibly have a md-icon in it include its own overrides for md-icon color is an undesirable pattern.