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

Created on 8 Mar 2018  ·  24Comments  ·  Source: mui-org/material-ui

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

v0.x

Most helpful comment

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

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

All 24 comments

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

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

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

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.

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'

Is there the same package for yarn?

Every package for npm should be available to yarn (unless you use different registries but I suspect that doesn't apply to you).

indeed @eps1lon ... I've got an issue while installing.. that's the reason why I though there isn't a package with he same name signature. Thanks.

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

@atuljustano Please open a separate issue and fill out the template.

@atuljustano Please don't. We GitHub issues exclusively to track bugs and feature requests. Please use StackOverflow or spectrum.chat instead. There is a StackOverflow tag called "material-ui" that you can use to tag your questions. Thanks!

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

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';

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

@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:

image

What do suggest we could do to make it clearer?

It worked for me, thanks

Is there the same package for yarn?

Yarn uses same source as NPM. So, there is no difference in NPM/Yarn packages.

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.

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

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

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

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'

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

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

Does. Not. Help.

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

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!

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

FranBran picture FranBran  ·  3Comments

mb-copart picture mb-copart  ·  3Comments

sys13 picture sys13  ·  3Comments

finaiized picture finaiized  ·  3Comments

newoga picture newoga  ·  3Comments