how md-icons are rendered on browser

问题

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?

回答1:

This feature is called ligatures which allows to render icons using name.

you can find more details in below link

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

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

回答2:

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?

来源：https://stackoverflow.com/questions/45323577/how-md-icons-are-rendered-on-browser

标签

css

angular-material2

google-material-icons