<mat-icon> ignores color attribute if inside <button mat-menu-item>

[Anonymphous]

Bug, feature request, or proposal:

It's a bug.

What is the expected behavior?

I would expect <mat-icon color="accent"> in my menu item to respect the color attribute while it is inside of its parent tag.

What is the current behavior?

It does not apply the color, here is a screenshot with comparison between <button mat-button> which respects the attribute and <button mat-menu-item> which does not.

What are the steps to reproduce?

Here is a bit edited mat-menu plunker with the problem displayed link

What is the use-case or motivation for changing an existing behavior?

I think it should be repaired, since the <mat-icon> explicitly supports coloring with color attribute.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular v5.0.2
@angular/cdk v5.0.0-rc.1
@angular/material v5.0.0-rc.1
TypeScript v2.4.2
IE 11, Firefox 57, Chrome 62

[jelbourn]

The menu-items styles are trumping the icon styles

[jonyadamit]

Hi, the fix is partial, please re-open. Cannot bind color property.
See example: https://stackblitz.com/edit/mat-icon-color-menu-issue.
The example includes a workaround (adding [attr.color]="'anything'").

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}