Module not found: Can't resolve 'material-ui-icons/Menu' Martial Next

[liywjl]

import MenuIcon from 'material-ui-icons/Menu';

causes

Module not found: Can't resolve 'material-ui-icons/Menu'

Used exact code from example: https://github.com/mui-org/material-ui/blob/v1-beta/docs/src/pages/demos/app-bar/ButtonAppBar.js

[liywjl]

oh this is not part of the core material-ui package: npm install --save material-ui-icons

[thewillwill]

For anyone else experiencing this issue: npm install @material-ui/icons

https://www.npmjs.com/package/@material-ui/icons

[mbrookes]

We'll probably add a deprecation warning to material-ui-icons at some point. For the moment they are functionally identical, but if Google ever release new icons, only @material-ui/icons will be updated.

[de24world]

You should update @material-ui.
So please write in your terminal

npm install @material-ui/core
npm install @material-ui/icons

And restart 'npm start'

[atulcodex]

have any idea about this error
Module not found: Can't resolve '@material-ui/core/Grid' in 'E:\Material Ui\firstapp\src'
:(

[mariacheline]

Hi, I get ....node_modules/@material-ui/icons"' has no exported member 'MenuIcon'.
despite installing @material-ui/icons

[zahidalidev]

i have the same issue just install
for icons
npm install @material-ui/icons

and for other materials
npm install @material-ui/core

and import like this
import AppBar from '@material-ui/core/AppBar';
import SearchIcon from '@material-ui/icons/Search';

[metalogica]

Would be nice to update the official docs to make this a little bit clearer.

[mbrookes]

@catonmat The first sentence in the Material Icons page mentions the package name. It's also covered in the Installation docs. Every example that uses icons shows the import, and there's a copyable import on each icon preview:

What do suggest we could do to make it clearer?

[adisher]

I was facing an issue, tried to import the icon automatically in vscode, but it was not working. Turned out, I had to import it in a separate way like: import DeleteIcon from '@material-ui/icons/Delete';

So, you see, DeleteIcon and Delete are two different names here.

[mbrookes]

@adisher You can import it as Delete if you prefer, but importing as DeleteIcon is clearer when the component is used later.

[raychunghk]

Change
import MenuIcon from '@material-ui/icons/Menu';

to:
import Menu from '@material-ui/icons/Menu';

[tdecker91]

I was experiencing this issue because I was importing incorrectly. I was trying to use

import { MenuIcon } from '@material-ui/icons/Menu'

But I needed to change it to

import MenuIcon from '@material-ui/icons/Menu'

[akopchinskiy]

For anyone else experiencing this issue: npm install @material-ui/icons

https://www.npmjs.com/package/@material-ui/icons

Does. Not. Help.

[DHBuild002]

Using VS Code
I have both Icons and Core installed.
The SearchIcon is returning a similar error:

**Failed to Compile
Module not found: '@material-ui/icons/Search' in [Project Filepath]

@ ./src/Header.js 14:14-50**

This is the import instruction:
import SearchIcon from "@material-ui/icons/Search";

HTML:

Dependencies:

"@material-ui/core": "^4.11.0",
"material-ui-icons": "^1.0.0-beta.36",

[arpan-banerjee7]

You should update @material-ui.
So please write in your terminal

npm install @material-ui/core
npm install @material-ui/icons

And restart 'npm start'

It works!

[DHBuild002]

You should update @material-ui.
So please write in your terminal

npm install @material-ui/core
npm install @material-ui/icons

And restart 'npm start'

It works!

Yes, I found this package, suggested in another thread, was incorrect for my purpose:

"material-ui-icons": "^1.0.0-beta.36",

I reinstalled using your approach and found that resolved the problem. Thanks Arpan!

[lopeselio]

Use npm and not yarn. I had issues with yarn

[abelamelo]

Change
import MenuIcon from '@material-ui/icons/Menu';

to:
import { Menu as MenuIcon } from "@material-ui/icons";

[Prawinpravs]

For anyone else experiencing this issue: npm install @material-ui/icons

https://www.npmjs.com/package/@material-ui/icons

Hi even after installing this also i'm getting same error saying that
Module not found: Can't resolve '@material-ui/icons/Home' in 'C:\Users\User\Desktop\malnadmusic\src'

[matveychuk]

Use npm and not yarn. I had issues with yarn

It solved my issue. With yarn not all icons were in node_modules/@material-ui/icons. They start with 'R' letter don't know why. But after using 'npm i' all icons are in place

[harounchebbi]

Change
import MenuIcon from '@material-ui/icons/Menu';

to:
import { Menu as MenuIcon } from "@material-ui/icons";

This worked for me! thank youuu :))

[marafee1243]

Change
import MenuIcon from '@material-ui/icons/Menu';

to:
import Menu from '@material-ui/icons/Menu';

This worked perfect.

[dkm94]

Change
import MenuIcon from '@material-ui/icons/Menu';

to:
import { Menu as MenuIcon } from "@material-ui/icons";

It worked for me thank you so much

[anubhavbagri]

Change
import MenuIcon from '@material-ui/icons/Menu';

to:
import { Menu as MenuIcon } from "@material-ui/icons";

Perfect solution!

[rbabalola]

This worked for me:

change
import DeleteIcon from '@mui/icons-material/Delete';

to
import DeleteIcon from '@material-ui/icons/Delete';

Seems there are bugs on the Icon path

[RandyWritesCode]

This worked for me:

change import DeleteIcon from '@mui/icons-material/Delete';

to import DeleteIcon from '@material-ui/icons/Delete';

Seems there are bugs on the Icon path

Made it all the way to the bottom to find this! Thanks for the post
(it worked)

[KDDeveloper]

Change import MenuIcon from '@material-ui/icons/Menu';

to: import { Menu as MenuIcon } from "@material-ui/icons";

Thankyou this worked!

[RandyWritesCode]

The path for an Icon was not correct. If the Module is not found, and you have imported the module, then maybe the path is not correct. Went to node_modules > @material-ui and scrolled until i found the file that I was looking for ie Help.js and used that in the import:

import HelpIcon from '@material-ui/icons/Help';

[PradipGohil]

npm install @mui/icons-material

[wdev0901]

This is worked me. Thank you.

[icest99]

For anyone else experiencing this issue: npm install @material-ui/icons
https://www.npmjs.com/package/@material-ui/icons

Hi even after installing this also i'm getting same error saying that Module not found: Can't resolve '@material-ui/icons/Home' in 'C:\Users\User\Desktop\malnadmusic\src'

Try to update your import style directly from MaterialUI Icon page

[Maclenn77]

Hi.

I experienced the same problems and I tried unsuccessfully many of the solutions here. After reading this post of StackOverflow, I realized the problem. My version is v4 and I was trying to import it as v5. Even when I reinstalled the material icons as appears in this thread, the version was the same.

So, if the solutions here don't work for you, I suggest checking your package.json file and checking the version. Here you can browse for icons of v4.

[AlbertDev33]

Use npm and not yarn. I had issues with yarn

Thanks. This worked for me! 👍

[WNortier]

After you've installed the packages in some cases you may need to restart the development server by quitting and running yarn start

[senior-dev-1019]

please install the icons-material like following command line
npm install @mui/icons-material

[aknahin]

Getting the same error. When I tried to install it with the code given above, these error message is shown.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree 
npm ERR!
npm ERR! While resolving: my-portfolio@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project    
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
npm ERR! node_modules/@material-ui/core
npm ERR!   peer @material-ui/core@"^4.0.0" from @material-ui/icons@4.11.3
npm ERR!   node_modules/@material-ui/icons
npm ERR!     @material-ui/icons@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Lenovo\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\Lenovo\AppData\Local\npm-cache\_logs\2022-07-14T08_06_45_166Z-debug-0.log

[aknahin]

Getting the same error. When I tried to install it with the code given above, these error message is shown.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree 
npm ERR!
npm ERR! While resolving: my-portfolio@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project    
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
npm ERR! node_modules/@material-ui/core
npm ERR!   peer @material-ui/core@"^4.0.0" from @material-ui/icons@4.11.3
npm ERR!   node_modules/@material-ui/icons
npm ERR!     @material-ui/icons@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Lenovo\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\Lenovo\AppData\Local\npm-cache\_logs\2022-07-14T08_06_45_166Z-debug-0.log

This code works for me: yarn add @material-ui/icons

[Tejv1708]

Module not found: Error: Can't resolve '@material-ui/icons/LockOutlinedIcon' in .
What should I do .

[AlbertDev33]

Module not found: Error: Can't resolve '@material-ui/icons/LockOutlinedIcon' in . What should I do .

try: npm install @mui/icons-material

This worked for me.

[MichaelGorski]

Module not found: Error: Can't resolve '@material-ui/icons/LockOutlinedIcon' in . What should I do .

Did you try to use import { LockOutlined } from "@mui/icons-material"; ? I had the same issue with trying to import icons like import DeleteIcon from "@mui/icons-material/Delete"; but didnt work.
Using the other way solved it for me.

(using vite)

[RubenMoraVargas]

I fix this problem installing the correct library in my case
npm i @mui/icons-material
yarn add @mui/icons-material

[maniutin]

Hi.

I experienced the same problems and I tried unsuccessfully many of the solutions here. After reading this post of StackOverflow, I realized the problem. My version is v4 and I was trying to import it as v5. Even when I reinstalled the material icons as appears in this thread, the version was the same.

So, if the solutions here don't work for you, I suggest checking your package.json file and checking the version. Here you can browse for icons of v4.

this worked for me, thanks!