md-icon-button hover has no change

[Kyderman]

Bug

What is the expected behavior?

When hovering an md-icon-button, there should be a circular background around the icon

What is the current behavior?

There is no background change

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

Im using master, on Angular 4

[ocarreterom]

Icon buttons don't have hover state: https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons

[Kyderman]

weird, they use to and it seemed a bit more user friendly.

[willshowell]

It was removed in #3208, presumably to match the spec.

[jelbourn]

It's is indeed intentional- the spec shows no hover behavior for icon buttons.

[Levent0z]

That's a shame, it looked really nice.

[FirstVertex]

Google apps like Gmail all use hover state for Icon button lol
Inside Gmail hover the toolbar icons.
In Google Drive hover the toolbar icons.

https://apps.google.com/u/1/user/hub
On this page squish down the screen to tablet resolution to make hamburger menu icon button appear in top left.

Material design "spec" is one thing, but if the user is accustomed to a behavior we need to provide seamless behavior across all apps for user to be familiar and comfortable with UI. So in this regard my app will depart from "spec" and instead I will implement my own hover states because user expects it. User does not care about "spec".

It is a real shame if Material gonna update their "spec" but not Google apps at the same time. Then my boss gonna point at MY app and say it's wrong because it doesn't match their expectation of Material, which is what they see and use every day in Google apps.

1.5 years went by since they change the "spec" like this but their designer of their main apps still disagrees apparently. The UI's of these apps have been updated many times since 1.5 years but they didn't ditch the hover state of icon button yet, wonder why?

[Mubramaj]

You can apply a global style to your application to hover all the mat-icon button.
I did it using Angular theming.

$background: map-get($my-theme, background);

// add hover for mat-icon butttons
.mat-icon-button:hover {
   background-color: mat-color($background, hover);
 }

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