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“.