0

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/icons@2.0.0-beta.1

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

troglodyte07
  • 3,598
  • 10
  • 42
  • 66

2 Answers2

1

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';
cdoshi
  • 2,772
  • 1
  • 13
  • 20
1

Try this. 

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

Use <CheckCircleoutline />

noName94
  • 3,783
  • 1
  • 16
  • 32