Search code examples
cssreactjsgoogle-material-icons

Reactjs material icons in css

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?

Solution

  • 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.