Why do my md-icons show up as blank squares?

The Problem

On a recent project where I was experimenting with Angular Material Design, I could not for the life of me get the icons to display.

In place of icons all I had was those pesky blank squares.

• A quick check of both the network tab and Fiddler showed the font's were being served correctly.

• The MIME types were also set correctly in the web.config.

• I double triple checked the spelling of the icon name

• I made sure that I was setting the font-family correctly.

@font-face {
  font-family: 'Material-Design-Iconic-Font';
  src: url('../fonts/Material-Design-Iconic-Font.woff2?v=') format('woff2'), url('../fonts/Material-Design-Iconic-Font.woff?v=') format('woff'), url('../fonts/Material-Design-Iconic-Font.ttf?v=') format('truetype');
  font-weight: normal;
  font-style: normal;
}

But still, no dice.

I was starting to feel like an idiot - what silly thing had I overlooked?

Finally, some Googling led me to a blog post written by none other than Mr Scott Hanselman. Who just happened to be having the exact same problem, but with Font Awesome.

What do you know? - even famous programmers can be tripped up by the silliest things!

The Fix?

Most icon font's require you to proceed the icon-name class with the font name.

E.g. For Font Awesome

<i class="fa fa-home" title="Home"></i>

Or since I was using an icon font with Material Design

<span md-font-icon="icon icon-home"></span>

A Better Fix

However, I'm not a fan of typing more than I have to and I'm also liable to forget to do this.
So I instead I left the attribute as it was and created the following CSS rule.

[class*="icon-"] {
  display: inline-block;
  font: normal normal normal 14px/1 'Material-Design-Iconic-Font';
  speak: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
}

Hey Presto! Abracadabra! No more blank squares!