FAB: Material icon font not vertically centered in IE 11...sometimes?

[kfranqueiro]

What MDC Web Version are you using?

0.35.1

What browser(s) is this bug affecting?

IE 11

What OS are you using?

Win 10

What are the steps to reproduce the bug?

• Run npm run dev and view fab.html in IE 11
• Or run npm start and view mdc-fab/classes/baseline.html in IE 11

What is the expected behavior?

FAB icons should be centered both horizontally and vertically

What is the actual behavior?

FAB icons are off-center vertically; they're too high up. As of #2715, you can see that the icon's bounding box looks centered, but the icon is not centered within its bounding box.

Example from fab.html:

Any other information you believe would be useful?

A few baffling complications, which have been driving me crazy and making me question reality:

• I checked local MDC Web demos as of 0.34.1, and the same vertical misalignment happens. That was prior to feat(fab): Add support for svg icons #2504.
• I tried specifically reverting feat(fab): Add support for svg icons #2504 against master; demos and screenshot test pages still show the icon vertically misaligned.
• The icon in the FAB fixed at the lower right was always vertically centered in IE! However, its markup doesn't match the recommended markup as of feat(fab): Add support for svg icons #2504 (it always used an SVG, but nested it inside a span which had the icon class).
• This codepen running against 0.34.1 shows the icons centered properly!
  
• The catalog showed the icons vertically centered as of 0.35.x! (Not horizontally centered, though, which is what fix(fab): Restore horizontal alignment in IE11 #2715 fixes.)
  

In other words, this issue seems inconsistent and I haven't figured out what the kicker is as to when it is and isn't reproducible.

[kfranqueiro]

We also ran into a similar issue in Icon Button while reviewing #2748. What's interesting is the issue presented itself when using Material Icons, but not when using Font Awesome. It also corrects itself when instantiating JS for icon button toggles.

I suspect we have some IE flake specifically with the Material Icons font. I'm going to attempt to reduce a test case to show the Icons team.

[kfranqueiro]

Okay, I finally got to the bottom of this.

This happens specifically when there is trailing whitespace within the material-icons element. It also happens with Font Awesome if you put space inside its element.

Reduced example.

I guess we can try to ensure that our demos and READMEs avoid spaces within material-icons elements. This is presumably a non-issue for the Catalog because surrounding whitespace is being shed during JSX compilation.

I'll notify the icons team of this, but I'm not sure whether it's resolvable (or worth resolving).

[acdvorak]

Should we mention this in the READMEs of all components that use material-icons (button, FAB, extended FAB, icon toggle, etc.)?

[kfranqueiro]

I have a branch in progress that does that for FAB (I'm waiting on your screenshot test PRs to get in before I PR it so I can update goldens). I think Will is going to handle it for the new icon button package.