CODEWITHSUNDEEP
cssiconsmaterial-design
rcjsdev
rcjsdev

Reputation: 843

Material Design Icons not showing in browser

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

Public folder

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

Upvotes: 17

Views: 67562

Answers (3)

aparna_shelar
aparna_shelar

Reputation: 70

Simply add the below CSS link to your page and access material design icons by Google web fonts.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

And specify icon you want to use.

<span class="material-icons">face</span>

For more details refer to the Material icon documentation

Upvotes: 2

Jayant Nayak
Jayant Nayak

Reputation: 59

Simply make use of google material design icons directly in your webpage. You can find the details here https://google.github.io/material-design-icons/ I was able to fix this issue by using the google web font style sheet. It is much easier this way.. you can just include the style sheets in you webpage and all web font icon classes are loaded and you are good to go.

Upvotes: 2

rcjsdev
rcjsdev

Reputation: 843

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

Upvotes: 6

Related Questions