一直觉得 google 的 Material Icons 图标非常精美，今天终于要把这个图标字体应用到新页面中，但是发现了一些问题。就是图标很难和文本对齐。这里讲一下遇到的坑和解决方案。
遇到的问题
Material Icons 和 Awesome Icons 的呈现对比（同样的 CSS）。
Material Icons 和 Awesome Icons 的计算结果对比。
一般情况下，图标字体的对齐受字体大小和行高的影响，尽管你为图标字体设置了合理的 CSS ，但 Material Icons 依然无法完美对齐（即使使用 vertical-align: middle; 也还是有很多偏差，和中文、英文对齐基线无关）。
解决方案
经过搜索 stackoverflow 和 Material Icons 的 Issues ，发现该问题普遍存在，google 的工程师表明这是一个字体问题，并希望可以在之后改进（当前测试有问题的版本 V3.0.1 ）。
目前要解决 Material Icons 的对齐问题，stackoverflow 和 Material Icons 的 Issues 上面也给出了无数种，但是还需要根据自己的全局 CSS 制定不同的方案。经过测试，我发现一个应该可以涵盖大部分使用 reset css 或者 ui 框架的比较好解决方案：
.material-icons {
...
display: inline-block;
font-size: inherit;
line-height: inherit;
vertical-align: middle;
transform: translateY(-.1em);
...
}一些参考：
https://stackoverflow.com/questions/43360526/align-material-icon-vertically
https://stackoverflow.com/questions/35844390/material-design-icon-vertical-align-chrome
https://stackoverflow.com/questions/44866624/building-a-vertical-menu-using-md-menu-and-material-iconshttps://github.com/google/material-design-icons/issues/206
https://github.com/google/material-design-icons/issues/402
