Material Icons not working via React-materialize - reactjs

Question

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
materialize-css 0.100.2 => I tried 0.97, 0.98 with the same result
webpack 3.10.0
react 16.2.0 => I tried with 15.xx versions and got the same result
react-materialize 1.1.1
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  as I've tried both input methods

Answer 1

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.