Google material design icons – change color

Material design, Web
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): [crayon-5f0a78481dcc2705156075/] 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: [crayon-5f0a78481dcca974862416/] which results in 2. Soft-code the color in the SVG A better option might be to allow setting the color by CSS. [crayon-5f0a78481dccd369909452/] Change the SVG by adding a class attribute in the path section. Now you can control the color by CSS: [crayon-5f0a78481dccf769403372/] which results…
Read More

Google material design icons

Material design, Web
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…
Read More