CODEWITHSUNDEEP
reactjsmaterialize
William Bautista
William Bautista

Reputation: 61

Material Icons not working via React-materialize

I have a site using Middleman, Webpack and Materialize, we have a React component in one of the pages that works ok apart from the fact that Material Icons are not rendered on Internet Explorer and Firefox; all icons in the rest of the site work fine across all browsers. Any help would be appreciated.

Packages used

In my layout I'm importing the icons according to the Docs

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="preload" as="style" onload="this.rel='stylesheet'">

what is being displayed at the moment is the icon name like alarm_off or &#xE857; as I've tried both input methods

Upvotes: 0

Views: 1770

Answers (1)

William Bautista
William Bautista

Reputation: 61

After reading lots of blogs and issues on GitHub, I managed to solved the problem thanks to this Google issue, so I added this in my style.scss

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: local("Material Icons"),
       local("MaterialIcons-Regular"),
       url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2) format("woff2"),
       url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff) format("woff"),
       url(https://rawgit.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.ttf) format("truetype");
}

.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;
  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";
}

Also, I updated this in my nginx

  location ~* \.(?:eot|otf|ttc|ttf|woff|woff2)$ {
  expires 1M;
  add_header Access-Control-Allow-Origin "*";
  add_header Cache-Control "public";

Hope this help somebody else with similar issues.

Upvotes: 2

Related Questions