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
Best Answer
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