0

https://developers.google.com/fonts/docs/material_icons

I tried to change the color of google Icon, however, it shows just black.

I added below code in header.php

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

And I added the below css code in style.css

.material-icons.orange600 { color: #FB8C00; }

And I used the below code in the page where I wanted to show the icon

<span class="material-icons orange600">face</span>

However, it just shows a black colored icon. It would be appreciated if you can help me.

By the way, I know that google now has introduced material symbol which I can customize a lot. However, on the description page, I can't find how can I change color.

Is there a way to change color?

https://fonts.google.com/icons?icon.style=Rounded

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
kevin
  • 1

1 Answers1

0

I faced a similar problem and use a weird way to solve it.
html code:

<span class="orange600"><span class="material-icons">push_pin</span><span>

css code:

.orange600 { color: #FB8C00; }

It seems that the color of an icon is the "color" property of its container.

chaoting-sun
  • 1
  • 1
  • 2