How do ligature icons work in Material Icons?

Question

Using Material Icons, a plus icon can be added as follows:

add  

The text add is n

Answer 1

EXPLANATION

When you strip all the technical information, the answer is really quite straightforward, the font file incorporates a few tables amongst which:

• [MANDATORY] the list of characters
• [MANDATORY] the hexadecimal codes of those characters
• [OPTIONAL] one or more aliases/alternative names for those characters

The one or more aliases/alternative names are the 'ligatures' you are referring to and reside in the font file.

Essentially, when using a character/icon from a font file with ligatures, we have the option to use

• the 'regular' hexadecimal code: &#xxxx;
• or the alternative/alias/ligature name: ligature-name or alias

That is probably all the important info for a web designer to know.

---

EXTRAS

Go to CSS-Tricks: How do ligature icons work... to see usage examples and a brief explanation.

And if you want to mess around with your own icon font files I suggest you start using the IcoMoon APP:

• start the APP, select an icon and select 'generate font' (bottom right)
• Enable display of ligatures with the 'show ligatures'-button (top left 3rd button)