CODEWITHSUNDEEP
reactjsmaterial-uigoogle-material-icons
troglodyte07
troglodyte07

Reputation: 4066

Unable to import outlined svg icon component material-ui

I am using material icons in by react application. I wanted to use circular check.

I could import and use the check_circle icon as follows

import CheckCircle from 'material-ui/svg-icons/action/check-circle';

There is another icon called circle_check_outline which I am unable to import by the normal import line

import CheckCircleOutline from 'material-ui/svg-icons/action/check-circle-outline';

It gives Can't resolve 'material-ui/svg-icons/action/check-circle-outline' error

I tried downloading the icon and render it as suggested in Marson Mao's answer to a similar question in stackoverflow

import SvgIcon from 'material-ui/SvgIcon';
import CheckCircleOutline from '../../assets/check-circle-outline.svg';

  <SvgIcon>
    {CheckCircleOutline}
  </SvgIcon>

Then I got the following error

Uncaught TypeError: Cannot read property 'svgIcon' of undefined
    at SvgIcon.render

I also tried Joey T 's answer in the same question. Installed @material/icons package using npm install @material-ui/[email protected]

and imported the icon as follows

import CheckCircleOutline from '@material/icons/CheckCircleOutline';

Still getting the error

Can't resolve '@material/icons/CheckCircleOutline'

I am using material-ui v0

Upvotes: 0

Views: 2287

Answers (2)

shiva
shiva

Reputation: 3941

Try this. 

import CheckCircleoutline from '@material-ui/icons/CheckCircleOutline';

Use <CheckCircleoutline />

Upvotes: 1

cdoshi
cdoshi

Reputation: 2832

The material-ui does not have check-circle-outline icon, hence it gives an error when importing. What you can do is get the latest icons from @material-ui/icons and then import them

Install the package by using the following command

npm install @material-ui/icons

Then import it,

import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';

Upvotes: 1

Related Questions