How does Materialize icons work?

Question

There are two ways to use Materilize Icon:

1. <i class="mdi-action-settings"></i>
2. <i class="material-icons">settings</i>

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

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

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

Here is the URL to see Materialize Icons

Answer 1

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

Long story short, if you enable it, you tell the browser to look for letter combinations that should render in another way. An example is shown here. Some special fonts (like in materializecss or the ones you create in icomoon.io) just use this feature with words to render icons instead of combined letters. If the browser can't handle ligatures, then it gracefully falls back to the literal word, instead of an empty space.