CODEWITHSUNDEEP
reactjs
Ramya MiiM
Ramya MiiM

Reputation: 253

React JS - React Material UI icons not working?

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?

Upvotes: 9

Views: 26918

Answers (6)

FrenzyBull
FrenzyBull

Reputation: 1

Install the library

"npm install @material-ui/icon --force"

Upvotes: 0

Coni
Coni

Reputation: 1

This syntax worked for me in React import VolumeUp from '@mui/icons-material/VolumeUp'

and you must install npm i --save '@mui/icons-material'

You can find more info here and a React Code Generator here

Upvotes: 0

LRitter
LRitter

Reputation: 154

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

Upvotes: 0

QuinTRON MasTRON
QuinTRON MasTRON

Reputation: 1

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

Upvotes: 0

Mohammed Elzanaty
Mohammed Elzanaty

Reputation: 393

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

Upvotes: 15

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8122

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

Upvotes: 0

Related Questions