Materialize Css Change Icon Color

We can change icon color in Materialize Css using custom css style. Materialize Css Change Icon Color can also be changed using default color classes. Here in this article, we are going to explain how you can change icon color in Materialize css. You can use our online editor to edit and run the code online.

Materialize Css Change Icon Color Example

You can change icon color in Materialize css simply as below-

<!---using predefined color class-->
  <i class="large material-icons orange-text ">note_add</i>   
   <br>
  <!---using custom color class-->
  <i class="large material-icons my-color ">note_add</i>   
   <style>
     .my-color{
       color:rgba(239, 54, 54, 0.9);
     }
   </style>

In the above example we have added two classes one –orange-text predefined text color class., my-color – Custom color class. On the same way you can change the color of icon in Materialize css.

Output of above example-

Add Comment

📖 Read More

• 1. Materialize Css enable disable button
• 2. Materialize Css Button with Icon
• 3. Materialize css login form in popup
• 4. Materialize Css Registration form in Popup