材质图标无法通过 React-materialize 工作答案

【问题标题】：Material Icons not working via React-materialize材质图标无法通过 React-materialize 工作
【发布时间】：2017-12-06 09:47:25
【问题描述】：

我有一个使用 Middleman、Webpack 和 Materialize 的网站，我们在其中一个页面中有一个 React 组件，除了在 Internet Explorer 和 Firefox 上没有呈现 Material 图标这一事实之外，它工作正常；网站其余部分的所有图标在所有浏览器中都可以正常工作。任何帮助将不胜感激。

使用的包

materialize-css 0.100.2 => 我尝试了 0.97、0.98，结果相同
webpack 3.10.0
react 16.2.0 => 我尝试了 15.xx 版本并得到了相同的结果
反应物化 1.1.1

在我的layout 中，我正在根据文档导入图标

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

目前显示的是图标名称，如alarm_off 或&#xE857;，因为我尝试了两种输入法

【问题讨论】：

Material Design Icon isn't working on IE 11的可能重复
我不认为是重复导致了这个问题，正如我上面提到的，即使在 IE 和 Firefox，Material Icons 上也能正常工作，但在 React 组件中却不行

标签： reactjs materialize

【解决方案1】：

在 GitHub 上阅读了大量博客和问题后，感谢this Google issue，我设法解决了这个问题，所以我在我的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";
}

另外，我在nginx 中更新了这个

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

希望这可以帮助其他有类似问题的人。

【讨论】：