Classy Material Icons is simply a CSS file you can add to your project along with the Google Material Icons web font that allows you to use classes instead of content to set an icon. It's sometimes easier to change the class of an element than to change the content.
Classy Material Icons works with either the Google Hosted Web Font method or the Self Hosted Web Font method defined in the Material Icons Icon font for the web specifications. It does not change the default behavior, it only adds additional functionality.
It's generated using SCSS and the contents codepoints file included in the Material Icon repo, so it's easy to update when Google adds new icons.
It saved me a bunch of time on something, hopefully it will help you out as well.
The standard way to incorporate Material Icons into your web page looks like this:
<i class="material-icons">face</i>
Classy Material Icons allows you to also use this, and get the same result:
<i class="material-icons icon-face"></i>
You can also use codepoints:
<i class="material-icons icon-e87c"></i>
First, if you are not already using Google Material Icons, add them to your project using these steps.
Second, grab the classy-material-icons.css file from the repo and add the file to your project.
<link href="css/classy-material-icons.css" rel="stylesheet">
Finally, use either of these additional methods to add icons to your project:
<i class="material-icons icon-face"></i>
<i class="material-icons icon-e87c"></i>
Note that you must append "icon-" to the icon name, or codepoint to create the class name. You can find the icon names on the Material Icon documentation and the codepoints within the Material Icon repo.
This was made by Ben Markowitz. I'm a Senior Product Designer at Protenus. You can follow me on Twitter.