How do Material Icons set the icon based on the content of the element?

Question

How do the icons with the following structure work?

<span class="material-icons">
   accessibility_new
</span>

I have been poking around the Material Icons repo trying to understand how the icon is determined by the content of the HTML but cannot for the life of me figure it out.

I suspect it has something to do with the actual font files, but when I try to open them in Font Forge nothing loads.

EDIT: I understand how to use Material Icons themselves, but I am trying to understand how to recreate this functionality with my own icon font.

Answer 1

Generally with this, you would have run:

npm i material-icons

so they would live in your project (look at your package.json file!). So, when you specify a certain icon like accessibility_new, then you are simply referencing the library that lives in your project folder. Does this answer your question?