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

问题描述

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

mode_edit

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

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

这里是使用的类

.mat-icon {背景重复:不重复；显示:内联块；填充:当前颜色；高度:24px；宽度:24px；}.material-icons {font-family: '材质图标';字体粗细:正常；字体样式:正常；字体大小:24px；行高:1；字母间距:正常；文本转换:无；显示:内联块；空白:nowrap；自动换行:正常；方向:ltr;-webkit-font-feature-settings: 'liga';-webkit-font-smoothing:抗锯齿；}

但我无法理解这些图标是如何在 UI 上呈现的?我只知道 md-icons 是矢量图像的字体图标.有人可以解释它的呈现方式吗?

解决方案

根据 材质图标的文档

<块引用>

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

face//渲染为人脸

<块引用>

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

这里是关于stackoverflow的详细答案

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

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>

Here are the classes that are used

.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;
}

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?

解决方案

As per the 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

And here is the detailed answer on stackoverflow

How do ligature icons work in Material Icons?

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