如何在 React 中使用 Material UI 图标？答案

【问题标题】：How to use Material UI icons in React?如何在 React 中使用 Material UI 图标？
【发布时间】：2018-11-22 14:13:41
【问题描述】：

我是 react 新手，正在开发现有的 React 组件。我需要包含一个图标，并注意到一些已经被引入，例如：

import KeyboardArrowLeftIcon from 'material-ui/svg-icons/action/keyboard-arrow-left';

我找不到文件夹 (material-ui/svg-icons/action/)，但尝试添加一个新图标：

import KeyboardArrowRightIcon from 'material-ui/svg-icons/action/keyboard-arrow-right';

但是，这会在编译时产生错误。

有人知道如何添加新图标吗？或者，为什么这些图标没有明显的导演？

【问题讨论】：

编译错误是什么？以及您正在使用什么包

标签： reactjs

【解决方案1】：

安装素材图标：npm install @material-ui/core @material-ui/icons
导入您将使用的图标：import MenuIcon from '@material-ui/icons/Menu';
使用图标：<MenuIcon/>

您也可以使用https://material-ui.com/components/material-icons/ 搜索您需要的图标。

【讨论】：

我发现它也与@material-ui/core 有依赖关系。所以，你还需要运行npm install @material-ui/core。
此解决方案崩溃，因为Module not found: Can't resolve '@material-ui/core/SvgIcon' 在导入其中一个图标时

【解决方案2】：

也可以通过 CDN 从公共文件夹中调用 index.html 中的链接来导入它们。

只需将下面的链接复制并粘贴到 head 中。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

【讨论】：

【解决方案3】：

import EditIcon from '@material-ui/icons/Edit';

<EditIcon />

material-ui

【讨论】：

【解决方案4】：

您是否尝试过先安装依赖项。这是Material Icons的链接

【讨论】：

感谢@Deepak Brahmania，但由于其他图标工作正常，它们不是已经安装了吗？
我不知道我必须安装该依赖项，但我想要的特定图标的路径错误。
这是一个公认的答案吗？它应该是一条评论，因为它没有以可用的方式回答。

【解决方案5】：

有一个 material-icons-react 库可以轻松使用图标。

https://www.npmjs.com/package/material-icons-react

这是一个快速图标参考。 https://material.io/resources/icons/?icon=nature_people&style=baseline

【讨论】：

【解决方案6】：

要将 Material-UI 中的图标导入 React.js，您必须使用 Pascal Case（keyboard-arrow-right 变为 KeyboardArrowRight）。关于路径，我使用的是 'import ArrowBack from '@material-ui/icons/ArrowBack'，您可能没有在 material-ui 中使用“at”符号（安装时），但您应该检查您所在的目录指向包含大量具有 PascalCase 中图标名称的 JS 文件（“AccessAlarm.js”是我的项目中显示的第一个图标/文件）。

【讨论】：