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

Answer 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

Answer 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?