Come funzionano le icone Materialize?

Question

Ci sono due modi per utilizzare Materilize Icon:

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

<i class="mdi-action-settings"></i> ho capito come funziona questo primo metodo. Questo funziona come CSS è definito di seguito:

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

Ora la mia domanda è come il secondo metodo <i class="material-icons">settings</i> funziona?

Ecco l'URL per vedere Materialize Icons

Answer 1

Questo è qualcosa che si chiama legature. Dai un'occhiata alla pagina this che spiega come abilitarli nei CSS.

Per farla breve, se lo abiliti, dici al browser di cercare combinazioni di lettere che dovrebbero essere visualizzate in un altro modo. Un esempio è mostrato here. Alcuni tipi di carattere speciali (come in materializecss o quelli creati in icomoon.io) usano questa funzione con le parole per rendere icone invece di lettere combinate. Se il browser non è in grado di gestire le legature, quindi torna con grazia alla parola letterale, anziché a uno spazio vuoto.