材质图标只是渲染文本，反应物化

Question

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

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

          <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>

有没有人知道问题出在哪里？这个程序目前在本地运行，我读到这可能是materialize的一个问题，到目前为止，我找到的唯一明显的解决方案是从google下载icons包，但为一个程序下载91k图标文件是愚蠢的，不是吗？希望有更好的解决方案

Answer 1

如何将materialize-css与图标和其他js特性一起使用

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‘