Google material design icons



This tutorial shows you how to use Google’s material design icons in your web project in five simple steps.

1. Find the icon you want to use

Go to http://google.github.io/material-design-icons/ and look for the icon you want to use.

Let’s use the icon “add”:

Be sure to remember the category of the icon: “content” in this case.

2. Find the SVG file for the icon

Go to https://github.com/google/material-design-icons/tree/master/[category]/svg. In this case, replace [category] with “content”.

3. Get the SVG code by selecting the RAW view on the file

which gives you this:

4. Create an SVG file in your project image folder

copy the content of the above page into a file in your web project.

5. Reference the icon in your HTML code

Once you created the SVG file you can reference it in an IMG tag:

And there you go:

If you want to change the color of this icon, then continue to “changing the color of a material design icon“.