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

问题描述

我在项目中使用了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?

推荐答案

按照材质图标的文档

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

这是关于stackoverflow的详细答案

And here is the detailed answer on stackoverflow

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

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