How to change the color of the icon in Materialize?

Asked

Viewed 6,742 times

5

I’m using the framework materialize and to put an icon I do this way:

<i class="material-icons">menu</i>

It turns out that by default the icon is in white color, I wonder how I can do to change the color of the icon?

I’ve tried it this way:

<i class="material-icons black">menu</i>

But then everything goes black around the icon, and that’s not what I want, I just want to change the color of the icon.

Does anyone have any idea?

css materialize

2 answers

8


You can wear something like: <i class="material-icons" style="color:#000;">menu</i>

Or if you want to change the icon color using a class as in the example you mentioned in the question, you can create a special class for it, for example:

/* Estas classes abaixo e outras que quiseres adicionar, serão implementadas no teu ficheiro .css */
.blackIcon {color:#000;}
.greenIcon {color:green;}
.rBlueIcon {color:royalblue;}
<!-- Este será o teu código HTML -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    
    <i class="material-icons">add</i>
    <i class="material-icons">menu</i>
    <i class="material-icons rBlueIcon">language</i>
    <i class="material-icons greenIcon">perm_media</i>

3

Older question, more like... The body of the icon responds to the color of the text:

    <i class="material-icons black-text">menu</i>

Browser other questions tagged css materialize

You are not signed in. Login or sign up in order to post.