mat-icon-button hover area bug

[nicholasfoden]

Bug:

when using mat-icon button, the area which triggers the button extends beyond the element.

What is the expected behavior?

the hover area is contained within the element.

What is the current behaviour?

the area extends beyond the element, possibly related to the text within the element which is replaced inside

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

https://stackblitz.com/edit/angular-material2-issue-1ydtyw?file=app/app.component.html

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

Chrome 66 & maybe others...

Is there anything else we should know?

setting overflow: hidden on mat-icon-button rectifies the issue

[josephperrott]

Note: It looks like this doesn't happen with all icons. For instance, in the repro if you replace add_box_outline with add it works as expected.

[nicholasfoden]

It seems to only be an issue on outlined icons
e.g. add_outline has the issue, where add does not