Google material design icons – change color

This tutorial shows you how to change the color of Google’s material design icons in your web project.

After following the tutorial Google material design icons you should have some icon SVG files in your web project.

This is a sample material design icon file (ic_add_24px.svg):

which results in

1. Hard-code the color in the SVG

One option is to hard-code the color in the SVG. If you want a light and dark flavor of your icon then you can add the color code in the SVG:

which results in

2. Soft-code the color in the SVG

A better option might be to allow setting the color by CSS.

Change the SVG by adding a class attribute in the path section.

Now you can control the color by CSS:

which results in