The EASY way to use Material Design Icons

If you’re a web developer, you’ve probably used Google’s Material Design Icon font. It’s a great way to include 1 small file and get gajillions of icons – instead of making 20 different pixel sizes of numerous icons, and then creating sprites and all that jazz.

The trouble is that until now, there was no reference for PAST versions of the MD icon font. You’re supposed to just load it from Google’s servers and be happy.

But what if you you don’t need 1800+ icons at 102kB in file size?

What if an older version of the MD icon font is just fine, you want to load the font file from your own servers or CDN, and you just want to know what icons are available in that older version?

Now, you’re all set!

You can also use my Material Design Icon Viewer to see the differences between versions of the icon font, search for a certain icon, and even see the difference in font file sizes between versions.

And then you can make a more intelligent decision as to what you really NEED in your application!

Links mentioned in the vid:

• Material Design Icons on Google Fonts
• Material Icons on github
• Scottie’s Material Design Icon Viewer

Code Example

CSS:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/3.0.2/MaterialIcons-Regular.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

.material-icons::before {
  content: attr(data-icon);
}

HTML:

<i class="material-icons" data-icon="account_box"></i>

Note that the data-icon attribute is better since otherwise, the HTML would look like this:

<i class="material-icons">account_box</i>

That means that search engines – in their infinite wisdom – will index the term ‘account_box’ as content text instead of an icon. That’s not very handy!

It’s pretty funny, really

On the one hand, you’re supposed to just load an ever-growing icon font direct from Google’s server – while also trying to increase page-load times and keep CSS, JS, and image file loading to a minimum.

On the other hand, they’re also telling you that AMP (accelerated mobile pages) is the future, which means your site ends up stripped down to bare essentials anyway and loaded directly from their servers instead of your own.

Well, whatever.

Finally, don’t forget that with a bit of extra CSS, you can create icons of different colors, with different backgrounds, and even overlap 2 icons on top of each other (with a bit of extra HTML in some cases). So, if you want a red smiley inside a blue box, no problem.

Have fun!