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?
-
2could you add the package.json file to see the dependencies.Imesh Chandrasiri– Imesh Chandrasiri2018-09-20 08:53:23 +00:00Commented Sep 20, 2018 at 8:53
-
In case you have installed UI icons, the import statement might need a change.. try `import {LockIcon} from 'material-ui/icons'Karun– Karun2018-09-20 10:14:51 +00:00Commented Sep 20, 2018 at 10:14
Add a comment
|
6 Answers
import Icon from '@material-ui/core/Icon';
then add font material icons to index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Comments
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
Comments
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
Comments
Here's an alternative is you cant install the node modules:
- Add "" to your head tag, or whever you store your links to style sheets.
- 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
Comments
Install the library
"npm install @material-ui/icon --force"
