how to import material ui icons?i met some problems using Material ui icons

I was using material UI with react in my project,and i have some troubles when it come 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 also i have 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 dose not make any difference,so can anyone help me ?

Icons are not part of material-ui/core so it must be install 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

Solved, the icons module should be added to dependencies. use npm

npm install @material-ui/icons 

or use yarn

yarn add @material-ui/icons 

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

on mac it worked but when i deploy to linux it failed and could not find the icon

this was because on mac it is not case sensitive and linux is

so

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

works on mac but fails on linux

the file is actually named like "DeleteForever"

so correct way to import is

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

For latest versions you need

npm install @mui/icons-material

Since Material-UI is now MUI

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

material ui doesn't provide icons from "@material-ui/icons" anymore. 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 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';