Material Icons 只是渲染文本，React Materialize答案

【问题标题】：Material Icons just rendering text, React MaterializeMaterial Icons 只是渲染文本，React Materialize
【发布时间】：2019-05-12 04:00:59
【问题描述】：

目前正在为班级做一个小组项目。它在前面使用了 React 和 MaterializeCss。

我正在尝试添加图标，例如，在登录屏幕上，我在用户名输入字段旁边有一个小人图标，但它只显示“ACCOUNT_USER”或在发送按钮上，我想显示一个图标称为发送，但它只显示“发送”。这是一个代码示例。

          <div className="row">
            <div className="input-field col s6 offset-m3">
              <i className="material-icons prefix">account_circle</i>
              <input id="username" type="text" className="validate" />
              <label htmlFor="username">Username</label>
            </div>

在有人告诉我使用包含来自 https://materializecss.com/getting-started.html 的 CDN 行之前，我已经有了。

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

有谁知道那可能是什么问题？该程序目前在本地托管，我读到这可能是物化的问题，到目前为止我发现的唯一明显的解决方案是从谷歌下载图标包，但是为程序下载 91k 图标文件是愚蠢的?希望有更好的解决方案

【问题讨论】：

它在这里工作。 codesandbox.io/s/0yz80yo3l0。可能是一些本地问题。如果有任何错误，请检查您的浏览器控制台。
@HardikModha 感谢您的回复。我注意到“内容安全策略：该页面的设置阻止了在 fonts.googleapis.com/icon?family=Material+Icons（“style-src”）处加载资源。内容安全策略：该页面的设置阻止了在 cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/…（“style-src”）处加载资源。内容安全策略：该页面的设置阻止了在 cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/…（“script-src”）处加载资源。'
您可以阅读此问题/答案以了解有关问题和解决方案的更多信息。 stackoverflow.com/questions/37298608/…
不幸的是，我已经尝试过该解决方案但没有运气，似乎唯一解决它的方法是完全阅读内容安全线
@HardikModha 好吧，我花了几分钟时间尝试学习制作自定义 CSP，我想我现在有了一个工作。非常感谢。我会乱来看看能不能再加强一点安全性:)。

标签： reactjs icons materialize jsx

【解决方案1】：

如何使用带有图标和其他 js 功能的 React 的 materialize-css

yarn add materialize-css@next --save or npm install materialize-css@next --save

yarn add install material-icons or npm install material-icons

3.请像这样导入以下内容；抓拍

导入'materialize-css/dist/css/materialize.min.css';

导入'materialize-css/dist/js/materialize';

导入'material-icons/iconfont/material-icons.css'

【讨论】：