DEV Community

Cover image for How does materialize css perceive icon names?
Hibrit Usta
Hibrit Usta

Posted on

How does materialize css perceive icon names?

I used the materialize css framework. I wondered about the working logic.
How does the icon perceive their names?
How does it make it possible to show icons by name?

In the example below,
When I write 'delete', the delete icon is displayed.

https://imgshare.io/image/screenshot-9.kmLA8

Top comments (4)

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman • Edited

Google this: “font ligature”.

It’s the same thing with emoji. Emoji uses at least two PUA character to represet single emoji character (the second one usually used as the modifier; e.g. an icon of a person with skin color variant).

Collapse
 
hibritusta profile image
Hibrit Usta • Edited

I searched for "font ligature".
I think you mean what is described in the article below.
webdesign.tutsplus.com/articles/yo...

When we examine the classes, font-family: 'Material Icons' appears.
Alt text of image

But I could not understand how it matches the text and codes with each other.

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman • Edited

The .material-icons class was used to make 'Material Icons' font family only applied to an element with that class name. It means that if you put that class name to the <body> element, it will replaces any “add” text inside your <body class="material-icons"> element into a plus icon and left others untouched. That’s how font ligature works. It merges a series of characters into one and treat them as a single glyph.

Another example of font ligature implementation can be found in this font: github.com/tonsky/FiraCode

So, it’s really inside the font file and not about the text. In your case, Material Icons font has treated “add” text as a single character. That’s it.

Thread Thread
 
hibritusta profile image
Hibrit Usta

Thank you Taufik Nurrohman. I will review the resource you shared.