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?
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.
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.
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.
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.
Add the class of "cyan-text" & "text-darken-4" to the .
<i class="large material-icons cyan-text text-darken-4">note_add</i>
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With