Earlier this year, Google released several new themes for their already incredible Material Icons set, including outlined, rounded, two tone, and sharp. Like a lot of designers, I couldn’t wait to start using these in my apps and prototypes. However, Google have yet to make these available via Google Fonts which is by far the simplest way to integrate them. I’m not sure why they teased us with the themes but missed a very simple opportunity to provide an already beloved integration technique. Meanwhile, requests on Github have multiplied and silence from Google has grown.
While building my “CAMERA” app this week, I again thought about integrating one of the new themes (sharp) alongside the bold Helvetica text which would be prevalent throughout my application. I could have simply downloaded the SVGs provided by Google and integrated them manually but I’m not a fan with inlining SVGs for the selfish reason they make my code messy. I then had a pretty simple thought.
What if I could simply create a new web font out of the icons I required?
I’m not sure what I googled but I ended up on the IcoMoon App which allows you to import SVG files and generate your own custom font. Sounds promising. As it turns out, it’s more than promising, it’s perfect! Here’s how I created a custom icon set using IcoMoon and the Material Design sharp theme.
Generating a Custom Material Icons Font
The first thing you’ll want to do is gather the .SVG files for the icons you’d wish to use on your app from the Material Icons portal. You can do this by first filtering icons by name using the search box in the top left. Also, make sure to select the theme you wish to use in the left panel as well. Once you find an icon you require, click it and a save dialogue will appear in the bottom left. This dialogue will provide an SVG download button. Click it to download the icon to your computer.
Once you’ve downloaded the icons you wish to use, head over to the IcoMoon App’s selection page. In the header bar, you should see the button “Import Icons.” Click it and select all of the .svg files you downloaded from Material Icons. Once you’ve done this, IcoMoon will automatically load those icons into the site. At this point, you should have an Untitled Set of icons. If you want to name this setup of icons, click the hamburger menu button to the right of “Untitled Set” to reveal a “Properties” option. I’m going to name my set “Material Icons Sharp.”
The next step involves generating your font. First, select each of the icons in your set then click the “Generate Font” button in the bottom right corner of the IcoMoon app. Now you’ll see each of the glyphs that will be available in your web font. Before we download the font, let’s update some codes and ligatures. First of all, toggle the ligatures on by clicking the “ﬂ” icon in the header bar. I then go through each glyph and remove any unwanted characters from their original svg name. For example, renaming “sharp-close-24px” to “close.” Next, I’ve chosen to update each of the codes so they’re similar to the original Material Icon web font. You can find a list of icons and codes on Github. I then update each of the ligatures to be similar to the name of the icon.
We can then update the preferences of our web font so it performs as closely to the Material Icons web font as possible. Click “Preferences” in the header bar to bring up that dialogue. First, I give it the name of “Material Icons Sharp.” I then set the class prefix to “material-icons-sharp.” Now there’s plenty of other options in here which I’m probably not understanding. However, simply changing these two settings have mimicked the original web font nicely for me.
From here, IcoMoon provides two options for integration. You can click the download button in the bottom right corner and integrate your icon set like any other web font using the provided
style.css file. Alternately, you can click the “Enable Quick Usage” to get a short lived CDN hosted .css file ready for integration — just like Google Fonts! You can even make this permanent by signing up for a Premium IcoMoon account. I simply love the idea of managing my icon set in a cloud service and you see the benefits of mixing and matching Material Icon themes without bring the whole set into your website.
I didn’t know about the IcoMoon app until Material Design presented me with this problem. So, I guess in a way, thank you Google? I’m sure Google is hard at work on making these themes available on Google Fonts. In the meantime, you can use the excellent IcoMoon app to integrate these wonderful icons into your next web experience. Happy building!