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

javascript reactjs material-ui
WEN-JY picture WEN-JY · Apr 11, 2018 · Viewed 24.3k times · Source

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

Neeraj Bansal picture Neeraj Bansal · Oct 29, 2018

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

Related questions

MUI customize button color?

I am struggling to modify button colors in MUI next (v1). How would I set muitheme to behave similarity to bootstrap, so I could just use "btn-danger" for red, "btn-success" for green... ? I tried with custom className but it doesn't …

Read More
Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop

I'm trying to add a snackBar in order to display a message whenever a user signIn or not. SnackBar.jsx: import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; import CheckCircleIcon from "@material-ui/icons/CheckCircle"; import ErrorIcon …

Read More
How get data from material-ui TextField, DropDownMenu components?

I create form, I have several TextField, DropDownMenu material-ui components included, question is how I can collect all data from all TextFields, DropDownMenus in one obj and sent it on server. For TextField it has TextField.getValue() Returns the value …

Read More