React JS - React Material UI 图标不起作用？

Question

我正在使用 React Material UI，但收到以下错误。

“未找到模块：无法解析‘@material-ui/icons/Lock’”

import LockIcon from '@material-ui/icons/Lock';

我怎样才能解决这个问题？

Answer 1

import Icon from '@material-ui/core/Icon';

然后将字体材质图标添加到index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Answer 2

您尚未安装@material-ui/icons包。 您可以从node_modules验证它

---

这可以解决您的问题，

npm install --save @material-ui/icons

Answer 3

MUI 已经将他们的icons从核心分离到一个名为@material-ui/icons的单独 node_module 中。

这是一个关于如何使用 React 设置 MUI 图标的好例子： https : //mechanicalrock.github.io/2021/04/27/fed-talk-s01e01-getting-started#keyboard-getting-started-with-material-用户界面

Answer 4

这是您无法安装节点模块的替代方法：

1. 将 "" 添加到您的 head 标签，或者您将链接存储到样式表的任何地方。
2. 添加类名为“material-icons”的 span 标签，并使 span 的内容成为您要使用的图标。 示例：菜单

您可以在此处找到有关所有图标的更多信息