how md-icons are rendered on browser

Question

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?

Gingrich

Answer 1

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?

Gingrich

Answer 2

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

Playroom