Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change color icon in Materialize?

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?

like image 827
HeartOfprogrammer Avatar asked Mar 12 '16 18:03

HeartOfprogrammer


People also ask

How do I change the color of materialized CSS?

Materialize comes with a color palette based on the material design base colors. I recommend you to use these to set theme colors, to follow the Material Design color system. thks it works for me. You have to import @import "materialize/components/color-variables"; before setting variables.

How do I change the color of Google icons?

One way to quickly change app icon colors is to use Themed icons. But there's a catch: Not every icon will change—only Google-provided ones like Chrome, YouTube, Camera, Phone, Messages, Play Store, Gmail, etc. Go to Settings > Wallpaper & style > Themed icons and select what you'd like to use.

How do I fill a color with material icon?

First make sure you have added Material Icon library. If this library is added just add the HTML css class format_color_fill to any element to add the icon. Material Design Format Color Fill Icon can be resized as per your need. You can manage size of icon(format_color_fill) by using font-size css style.

How do I use material icons in HTML?

To embed Google Icons in your HTML web pages you have to add the link of material-icons font library in the <head> section of your HTML file and then add the class material-icons in the <i> or <span> tag of the <body> section along with the name of the icon.


2 Answers

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

<i class="large material-icons cyan-text text-darken-4">note_add</i> 
like image 130
Christopher Avatar answered Sep 23 '22 01:09

Christopher


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!

like image 38
Shekhar Chikara Avatar answered Sep 20 '22 01:09

Shekhar Chikara