How to change color icon in Materialize?

Question

I use css framework Materialize.css I don't understand where past color in my HTML icon

<i class="large material-icons">note_add</i>

I have tried cyan darken-4

<i class="large material-icons cyan darken-4">note_add</i>

But nothing succeeded, I need exactly change color icon. How to make it?

Have you defined the classes `cyan` and `darken-4` in your CSS? — Shekhar Chikara, Mar 12 '16 at 18:32

score 88 · Answer 1 · answered May 31 '16 at 05:32

88

Add the class of "cyan-text" & "text-darken-4" to the .

<i class="large material-icons cyan-text text-darken-4">note_add</i>

answered May 31 '16 at 05:32

Christopher

1,019
1
7
12

1

This works in 2022 and the accepted answer below no longer works. Change `cyan` to your color of choice. For example: `large material-icons purple-text text-darken-1` – Olney1 Oct 13 '22 at 19:23

score 24 · Accepted Answer · answered Mar 12 '16 at 18:28

24

You can do this by adding a class to your icon like below-

<i class="large material-icons icon-blue">note_add</i>

And then in your CSS stylesheet, you can define the color for the icon-blue class

i.icon-blue {
    color: blue;
}

Your icon color will then be changed. Hope this helps!

answered Mar 12 '16 at 18:28

Shekhar Chikara

3,786
2
29
52

While this does work, you're not taking advantage of the built in Materialize classes. See https://stackoverflow.com/a/37537496/6402953 – Christopher Dec 23 '22 at 20:58

score 20 · Answer 3 · answered May 04 '17 at 15:34

20

It's easy, I'll show you an example:

 <i class="material-icons large red-text">room</i>

Just enter the name before the text (red-text)

answered May 04 '17 at 15:34

Luis Gerardo López Salazar

289
3
4

score 7 · Answer 4 · answered Nov 29 '17 at 13:07

7

I got an example with using the "style" attribute.

<pre></td><td class="col-sm-2"><i class="little material-icons" style="color:blue">search</i></pre>

answered Nov 29 '17 at 13:07

Nick Cuevas

1,474
15
10

score 1 · Answer 5 · answered Apr 01 '19 at 20:16

1

According to Materialize documentation you can access their direct css attributes.

.input-field input[type=text]:focus + label or similar
Class or ID modifier
Using materialize's color palette

answered Apr 01 '19 at 20:16

Ivens Applyrs

37
2

score 0 · Answer 6 · edited Sep 18 '21 at 08:32

0

Hey you asking that you want to change icon colour in Materialize CSS. Same was my Question But i have Find the ans....that

<i class="material-icons red-text" >home</i>

This Code will change the icon Color and if we want to give its background color just change it in custom.css

.class {background-color:red;}

edited Sep 18 '21 at 08:32

atiquratik

1,296
3
27
34

answered Sep 18 '21 at 06:08

Deepak

1
1

score -1 · Answer 7 · answered Jun 28 '17 at 10:40

If you want to use Jquery

This will change color of all the material icons

$(".material-icons").css("color", themeColor);

This will change color of the material icons inside an element eg input field

$(".input-field>.material-icons").css("color", themeColor);

Live Demo

See the Pen Materialize CSS Change Theme Color by Hitesh Sahu (@hiteshsahu) on CodePen.

How to change color icon in Materialize?

7 Answers7