不同的材质图标样式不对齐

Question

我在我的应用中使用了Google的Material Design Icons。目前至少需要两种样式：常规（实心）图标和轮廓图标。问题是，这两种样式无法对齐！

如果查看此输出，则没有明确的原因，常规图标和轮廓图标位于不同的高度。通过在检查器中检查它们，您可以看到边界框确实有所不同（对于所概述的图标，它们似乎比需要的要低）。

.icon {
  vertical-align: middle;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

<i class="icon material-icons">person</i>
<i class="icon material-icons-outlined">person</i>
<i class="icon material-icons">home</i>
<i class="icon material-icons-outlined">home</i>

是否有一种变通方法可以一次应用于.material-icons-outlined类，以确保它们在任何地方都正确定位？

margin-bottom: -1em适用于基本情况，但是图标用于许多不同的上下文，有时（例如，当父母需要缩小到其行高时），此解决方案将失败。

或者，有没有一种工具可以快速修复字体并使其字符显示在所需的高度上？

更新：这似乎仅在Windows 8.1上是一个问题。图标在Windows 10上对齐。在任何浏览器中都可以复制。

UPDATE（2）：也就是说，两种字体之间显然存在一些差异。概述的图标在较旧的iOS版本上不起作用（仅显示其名称而不是图标），而常规图标则正常工作。

Answer 1

您可以使用flex（甚至网格）将它们居中对齐。

.icon-wrapper {
  display: flex;
  align-items: center;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

<div class="icon-wrapper">
  <i class="icon material-icons">person</i>
  <i class="icon material-icons-outlined">person</i>
  <i class="icon material-icons">home</i>
  <i class="icon material-icons-outlined">home</i>
</div>