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.
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.
The
.material-iconsclass 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.
Thank you Taufik Nurrohman. I will review the resource you shared.