bug(menu): mat-menu-item > mat-icon - color attribute doesn't work with dynamic assignment

[TheCom3di4n]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

That the color attribute of the mat-menu-item > mat-icon should work with dynamic assignment.

What is the current behavior?

The color attribute of the mat-menu-item > mat-icon doesn't work with dynamic assignment.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-mat-menu-item-icon-color-attribute

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

Applying dynamically a warn color is a common use case. Furthermore, since it works with other components, it should also work with this one.

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

At least 7.0.4.

Is there anything else we should know?

This behaviour occours because of this (S)CSS-rule here, which applys the color for the icon: https://github.com/angular/material2/blob/9c075f5c50b4d91ad91d4f7fb180f68c5de45cd4/src/lib/menu/_menu-theme.scss#L27-L30

Since the mat-icon does not have a pure color attribute when dynamically assigned, but only an 'ng-reflect-color' attribute, this exclusion rule does not apply and the color rule from above overrides the mat-warn class.

--

A workaround for this bug is to dynamically assign the attribute itself: [attr.color]="(condition) ? 'warn' : 'secondary'".

--

This was already mentioned here: #8594 (comment)

[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.}