md-icons 是如何在浏览器上呈现的

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-icons 是矢量图像的字体图标。有人可以解释它的呈现方式吗？

Answer 1

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

您可以在下面找到更多详细信息link

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

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

Answer 2

根据 material icon's documentation

It’s easy to incorporate icons into your web page.

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

This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference

这里是 Whosebug 上的详细答案

How do ligature icons work in Material Icons?

md-icons 是如何在浏览器上呈现的

how md-icons are rendered on browser

css

google-material-icons

angular-material2