MD 图标如何在浏览器上呈现

Question

我在项目中使用了 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 图标是矢量图像的字体图标。有人可以解释它的渲染方式吗？

Answer 1

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

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

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

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

Answer 2

根据材料图标的文档

将

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

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

此示例使用称为连字的排版功能，该功能允许 仅使用其文本名称呈现图标字形。这 替换由 Web 浏览器自动完成，并提供更多 比等效数字字符引用可读的代码

这是关于堆栈溢出的详细答案

连字图标如何在材质图标中工作？