如何导入材质 ui 图标？我在使用 Material ui 图标时遇到了一些问题

Question

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?

Answer 1

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

Answer 2

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

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

Answer 4

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'

Answer 5

For latest versions you need

npm install @mui/icons-material

Since Material-UI is now MUI

Answer 6

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

Answer 7

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