search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.12k stars 2.15k forks source link

[Icon Button] Icon alignment in Chrome on Linux #3320

Open amaslakov opened 5 years ago

amaslakov commented 5 years ago

PLEASE READ THIS BEFORE FILING AN ISSUE

Bugs

Icon in an Icon Button is not correctly aligned, it seems to be a bit left off center of the button

What MDC Web Version are you using?

I observe this behavior in the official demo: https://material-components.github.io/material-components-web-catalog/#/component/icon-button

What browser(s) is this bug affecting?

Google Chrome Version 68.0.3440.84 (Official Build) (64-bit)

What OS are you using?

Ubuntu 18.04

What are the steps to reproduce the bug?

This behavior can be found in the official demo: https://material-components.github.io/material-components-web-catalog/#/component/icon-button

What is the expected behavior?

In Firefox 61.0.1 (64-bit) the icon seems to be properly aligned, though a dotted line appears around the icon when it is focused. image I expect the icon to be aligned in Chrome the same way it is aligned in Firefox. It looks like this: image It seems even, that it's not the icon that is misaligned, but the ripple, since it is cropped a bit from the right

What is the actual behavior?

The icon is misaligned

acdvorak commented 5 years ago

Thanks for filing this!

It looks like there are really two issues here:

  1. Ripple cutoff (tracked in #2431)
  2. Icon misalignment in Chrome

Not sure if the icon misalignment is a Chrome issue or a Material Icons font issue.