md-icons如何在浏览器上呈现 [英] how md-icons are rendered on browser

问题描述

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

I am using material2 and Material icons in my project. I want to know how these named icons are rendered in the browser. I have used

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

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

and in the browser, If I inspect the element

<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是矢量图像的字体图标.有人可以解释它的渲染方式吗?

but I am not able to understand how these icons get rendered on UI? I just know that md-icons are font icons that are vector images. Can someone explain the way it is rendered?

推荐答案

按照

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

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

这是关于stackoverflow的详细答案

And here is the detailed answer on stackoverflow

连字图标如何在Material Icons中工作?

这篇关于md-icons如何在浏览器上呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！