Material Design Icons not showing in browser

Question

I'm trying to host the Google Material Design icon set for my website however I cannot get the icons to show in Chrome or Safari.

I'm using this CSS file:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/public/dist/font/Material-Design-Icons.eot); /* For IE6-8 */
  src: url(/public/dist/font/Material-Design-Icons.woff2) format('woff2'),
       url(/public/dist/font/Material-Design-Icons.woff) format('woff'),
       url(/public/dist/font/Material-Design-Icons.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Pulling in the file with:

link(rel="stylesheet", href="/public/dist/css/font.css")

Which I can see in the browser is loaded

The font itself is even loaded into the page, I can see the .woff file in the network tab on Chrome.

This is the public folder structure which is hosted 'as is' by the server

I'm using the font here (jade):

i.material-icons.prefix perm_identity

And I can see the CSS class above applied to that element

But the fonts don't render.

EDIT: People here having the same issue: https://github.com/google/material-design-icons/issues/205

Answer 1

This was caused by outdated icon fonts on the materializecss.com website, I used the ones off the Google GH repo and they worked sigh