Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
Anonymphous opened this issue Nov 22, 2017 · 3 comments · Fixed by #8614
Closed

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

Anonymphous opened this issue Nov 22, 2017 · 3 comments · Fixed by #8614
Labels
help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions

Comments

@Anonymphous
Copy link

Anonymphous commented Nov 22, 2017 •
edited
Loading

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.
image

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
Copy link
Member

The menu-items styles are trumping the icon styles

@jelbourn jelbourn added help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions labels Nov 23, 2017
@glenstaes glenstaes mentioned this issue Nov 23, 2017
Merged
tinayuangao pushed a commit that referenced this issue Dec 1, 2017
@glenstaes @tinayuangao
fix(menu): Set menu-item icon color only when not set on mat-icon (#8614
d0cb077 
)

* fix(menu): Set menu-item icon color if not set on mat-icon

Set the theme icon color only if the `color` input property was not set on the `mat-icon` component.

Fixes #8594

* mat-menu-item with mat-icon[color] unit tests
Add unit tests for setting the mat-icon[color] attribute on a menu item

* Make ItemIconColorsMenu more clear
Related to #8594

* Fix linting issues

* Fix linting

* Removed "CSS engine tests"
@jonyadamit
Copy link

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'").

@TheCom3di4n TheCom3di4n mentioned this issue Nov 15, 2018
Closed
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(menu): Set menu-item icon color only when not set on mat-icon
4 participants
@jonyadamit @jelbourn @crisbeto @Anonymphous