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

Question

I am using react Material UI, and I received the following error.

"Module not found: Can't resolve '@material-ui/icons/Lock'"

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

How can I fix this?

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

You haven't installed @material-ui/icons package. You can validate it from node_modules

---

This would resolve your issue,

npm install --save @material-ui/icons

Answer 3

MUI have since separated their icons from core into a separate node_module called @material-ui/icons .

Here's a good example on how to setup your MUI Icons with React: https://mechanicalrock.github.io/2021/04/27/fed-talk-s01e01-getting-started#keyboard-getting-started-with-material-ui

Answer 4

Here's an alternative is you cant install the node modules:

1. Add "" to your head tag, or whever you store your links to style sheets.
2. Add a span tag with class name "material-icons" and make the content of the span the icon you want to use. example: menu

You can find more info about all the icons here