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

Question

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?

Answer 1

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

Answer 2

The icons module should be added to dependencies.

Use npm

npm install @material-ui/icons

Or use Yarn

yarn add @material-ui/icons

Answer 3

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.