CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
WEN-JY
WEN-JY

Reputation: 913

How can I import Material UI icons?i met some problems using Material ui icons

I was using Material UI with React in my project, and I had some troubles when it came to import the material icons. My code is copied from the Material UI (version:"material-ui": "^1.0.0-beta.41", "material-ui-icons": "^1.0.0-beta.36",) docs ,just like this:

import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import SkipNextIcon from '@material-ui/icons/SkipNext';

And I have also run npm install material-icons.

The error in my Chrome console is:

./src/index/musicCard.js Module not found: Can't resolve '@material-ui/icons/PlayArrow' in 'C:\Users\wenji\Desktop\myblog\src\index'

And I tried this one:

import SkipPreviousIcon from 'material-ui/icons/SkipPrevious';

And this one:

import SkipPreviousIcon from '@material-ui-icons/SkipPrevious';

But it does not make any difference. How can I fix it?

Upvotes: 55

Views: 131764

Answers (8)

Hudu
Hudu

Reputation: 31

I had similar issue but fixed it this way: navigate to material-ui/icons , search and click on the icon and you will find the right import syntax, eg. import ThumbUpAltIcon from '@material-ui/icons/ThumbUpAlt';

now npm install npm i @material-ui/icons or yarn add @material-ui/icons the package depending on your package manager, this should fix the bug accordingly.

Upvotes: 0

Raju Ahmed
Raju Ahmed

Reputation: 354

Material UI doesn't provide icons from "@material-ui/icons" any more. Instead, you need to import icons from "@mui/icons-material". So, if you are using the latest version and running your project with npm, you need to execute the following command:

npm install @mui/icons-material

If you use Yarn, then run the following:

yarn add @material-ui/icons

Now you are all set to use your Material icon ExampleMaterialIcon like this:

import ExampleMaterialIcon from '@mui/icons-material/ExampleMaterialIcon';

Upvotes: 1

vimuth
vimuth

Reputation: 5612

For the latest versions you need

npm install @mui/icons-material

Since Material-UI is now MUI.

And if we need a specific icon, we can get like,

import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';

And here are all available icons.

Upvotes: 18

nick
nick

Reputation: 678

I just solved a strange (but not so strange after I found out why) issue.

On Mac, it worked, but when I deployed to Linux, it failed and could not find the icon.

This was because on Mac it was not case sensitive and on Linux was.

So

import DeleteForEver from '@material-ui/icons/DeleteForEver'

works on Mac, but it fails on Linux.

The file is actually named like "DeleteForever".

So the correct way to import is:

import DeleteForever from '@material-ui/icons/DeleteForever'

Upvotes: 5

Neeraj Bansal
Neeraj Bansal

Reputation: 2826

Icons are not part of material-ui/core, so it must be installed using two commands.

If you are using npm:

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

If you are using Yarn:

yarn add @material-ui/core
yarn add @material-ui/icons

Upvotes: 94

WEN-JY
WEN-JY

Reputation: 913

The icons module should be added to dependencies.

Use npm

npm install @material-ui/icons

Or use Yarn

yarn add @material-ui/icons

Upvotes: 24

Yilmaz
Yilmaz

Reputation: 49182

Dependencies:

"@material-ui/core": "^4.12.4",
"@material-ui/icons": "4.11.3",

Example:

import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";

 <FavoriteIcon
            fontSize="large"
            style={{ fill: "red", stroke: "red" }}
  />

 <ShareIcon fontSize="large" />

Upvotes: 0

ZachHappel
ZachHappel

Reputation: 381

Change the import path from @mui/icons-material/ to @material-ui/icons/

This is not a 100% working solution, as there have been icons I have yet to be able to import (e.g. ConnectWithoutContact)

Regardless, this change has saved me several times so here is an example:

// Initial
import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';

// Fixed
import PermContactCalendarIcon from '@material-ui/icons/PermContactCalendar';

Upvotes: 2

Related Questions