How do Materialize icons work?

Question

There are two ways to use the Materilize icon:

• <i class="mdi-action-settings"></i>
• <i class="material-icons">settings</i>

<i class="mdi-action-settings"></i> I understand how this first method works. This works like css, defined below:

 .mdi-action-settings:before { content: "\e672"; } 

My question now is how the second method <i class="material-icons">settings</i> works?

Here is the url to see the icon material

Answer 1

This is something called ligatures. Take a look at this page that explains how to include them in CSS.

In short, if you enable it, you will tell the browser to search for letter combinations that should be displayed differently. An example is shown here . Some special fonts (e.g. in materializecss or those you create in icomoon.io) simply use this function with words to display icons instead of combined letters. If the browser cannot handle ligatures, it gracefully returns to the literal word, and not to empty space.