FontAwesome vs. Google Material Icons

Scalable, vector icons are very popular, and you see them on nearly all Websites. Instead of searching for individual icons and storing each image in your Website “images” folder, you can take advantage of “icon fonts” with hundreds of different icons.

I have used the FontAwesome desktop font for my Web designs and used the Web font on one of my projects. If you like the ability to use the desktop font for your designs in Photoshop and insert the icon names in your HTML, then you have the flexibility to style them to your own specs using CSS. You can find all of the hundreds of FontAwesome icons on their Cheatsheet; just copy and paste the one you want into your Photoshop design. However, FontAwesome takes a lot of resources, especially if you need only a few icons, e.g., phone, location, mail, and social icons. 

Google Material Icons to the rescue! Google offers the MaterialIcons Regular desktop font (TrueType), and a Google Web font as well.  Google claims that its Web font is very compact and does not require a lot of resources. If you prefer to host the icons, you can download individual icons in .png or .svg formats in any color you like, and save these in your Dreamweaver Images folder. Or you can download and host the 900-plus icons on your own server.

I made a “cheat sheet” in Photoshop using Google’s Noto Sans Regular and MaterialIcons Regular fonts. Some of the glyphs are pretty intuitive, e.g., type a lowercase “c” for Close, lowercase “p” for Phone, and lowercase “s” for Search. If you get stuck, just use the Glyphs panel in Photoshop or the Mac FontBook in other programs. Google has fewer icons than FontAwesome, and lacks icons for the common social platforms. 

Google Material Icons cheatsheet by Jill B Gilbert
Google Material Icons cheatsheet by Jill B Gilbert