Reactjs material icons in css

user_1001532 0
Viewed 1716

I have the following materials-icon package installed:

@material-ui/icons@4.9.1

I need to set the 'content' value for one of classes, in my CSS file, to the down arrow. How do I do this?

google-material-icons reactjs css
1 Answers

Material UI icons from @material-ui/icons@4.9.1 are exported as React components so you cannot use them in CSS.

But you have few options.

  1. Include the material icons font and use that. More info here and here

Check the codepen

Once you have included the font in your page you can use it in CSS like this

p::after, 
div::after {
  content: "face";
  color: blue;
}
  1. But I dont like importing the entire fonts file just to have a single icon. So this is what I used to do.

Get the svg of the icon. Inspect the icon from material ui icons page, get the svg code and create a new svg file with the copied html and place it in your project.

enter image description here

Once you have the svg file, in your CSS use it like this

.download:before {
  display: block;
  content: ' ';
  background-image: url('path-to-svg-folder/download.svg');
  background-size: 24px 24px;
  height: 24px;
  width: 24px;
}

NB: if you dont want to have a svg file you can use the data url method and include the entire svg in your CSS file.

user_11883220
Related