md 图标如何在浏览器上呈现答案

【问题标题】：how md-icons are rendered on browsermd 图标如何在浏览器上呈现
【发布时间】：2018-01-01 13:50:51
【问题描述】：

我在我的项目中使用 material2 和 Material 图标。我想知道这些命名图标是如何在浏览器中呈现的。我用过

<button md-raised-button><md-icon>mode_edit</md-icon></button>

在浏览器中，如果我检查元素

<md-icon class="mat-icon material-icons" role="img" aria-hidden="true">mode_edit</md-icon>

这里是用到的类

.mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

但我无法理解这些图标是如何在 UI 上呈现的？我只知道 md-icons 是矢量图像的字体图标。有人能解释一下它的渲染方式吗？

【问题讨论】：

标签： css angular-material2 google-material-icons

【解决方案1】：

此功能称为连字，允许使用名称呈现图标。

您可以在下面的链接中找到更多详细信息

https://alistapart.com/article/the-era-of-symbol-fonts

http://google.github.io/material-design-icons/#icon-font-for-the-web

【讨论】：

【解决方案2】：

根据material icon's documentation

将图标合并到您的网页中很容易。

<i class="material-icons">face</i> // rendered as face

此示例使用名为 ligatures 的排版功能，它允许只需使用其文本名称即可呈现图标字形。这替换由网络浏览器自动完成，并提供更多比等价的数字字符引用更易读的代码

这是关于stackoverflow的详细答案

How do ligature icons work in Material Icons?

【讨论】：