[IconButton] Incorrect width for some icons

[thdk]

Bug report

The width of some icons is not limited to the real icon image.

Steps to reproduce

Go to https://stackblitz.com/edit/materialiconswidth

<i class="material-icons">play_circle_filled_white</i>

<button class="mdc-icon-button material-icons">
    play_circle_filled_white
 </button>

Actual behavior

If these icons are used in Icon buttons then you can click on that white space on the right side of the button to activate the click event.

Seems to happen with following icons:

• play_circle_filled_white
• cast_for_education
• star_rate

Expected behavior

The clickable area of all icon buttons should be limited to the visible area of the icon button.

Screenshots

Your Environment:

Software	Version(s)
MDC Web	@material/icon-button@3.2.0
Browser	Chrome: 77.0.3865.120
Operating System	Windows 10

[MrSimmmons]

Just as a random stab in the dark as to why there is all that space on the right, I think it might be because that would be the animation length of some of the icons. I know that some material icons have animations, but I've never figured out how to use them.

As a small CSS fix for the button being able to be clicked on the right, if you add this to your css file it should fix it.

.mdc-icon-button {
    overflow: hidden;
}

I'll make a PR later today with a fix for the button clicking issue.

[abhiomkar]

I'm able to reproduce this issue, even internally.

Either mdc-icon-button or material-icons in general needs overflow: hidden.