Material-components-web: Vertical alignment issues in nav bar icons

[Extarys]

Basic code: https://gist.github.com/Extarys/cba6618f4c76de8733d3ab222de51ec0
Result:

I also notice the same issue in the demo website where the right github icon isnt aligned properly and the drawer icon on the left have the same issue.

They appear a little bit too high, not centered.

EDIT: I copied the wrong issue, damn.

[lynnmercier]

Our http://material-components-web.appspot.com/toolbar/index.html doesn't have any alignment issues I can see.

What demo website are you referring to?

[Extarys]

Both Firefox 55.0.2 x64 and Firefox Nightly 57.0a1 x64 on Linux Mint 18.2 (Fully up to date) have this issue on my machine. :/ (Sorry I forgot to tell browser/OS)
Chromium 60.0.3112.113 x64 doesn't have that issue.

On the link you provided, the top bar and the main demo in the middle present this issue, but not the 4 at the bottom's demos.

You think it's a Firefox on Linux issue? Should I open an issue with them?

[trimox]

Duplicated in SauceLabs w/Firefox 55.0.2 (windows), MDC v0.20.0

[kfranqueiro]

I noticed this in the toolbar demo's top toolbar yesterday, and @yeelan0319 pointed out that the toolbar takes a different height at different break points. I think the problem might exist specifically when the toolbar is not 56px tall.

[Extarys]

@kfranqueiro Maybe. I copied the exact code provided in the docs though.

[joshas]

Can confirm issue on Firefox 56.
Problem is that .mdc-toolbar__section has height: 100%, which has no effect on Chrome. On Firefox .mdc-toolbar__section is stretched to 64px (desktop) and because icons are aligned to flex-start - they are off center.

[megabild]

Can confirm issue on Microsoft Edge 41.16299.15.0 (Fall Creators Update).
Sorry guys, I feel really dirty reporting this.