Question

我有新的反应并正在处理现有的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';

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

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

Answer 1

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

Answer 2

您是否尝试过先安装依赖项？以下是Material Icons

的链接

Answer 3

我们一直在努力解决这个问题。享受新的文档页面：https://material-ui.com/components/material-icons/。

Answer 4

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

<EditIcon />

material-ui

Answer 5

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

Answer 6

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

只需将下面的链接复制并粘贴到头部即可。

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

Answer 7

有一个material-icons-react库，使使用图标变得容易。

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

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

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

7 个答案: