Download icon material io

Update (31/03/) : All icon themes work via Google Web Fonts now.

As pointed out by Edric, it's just a matter of adding the google web fonts link in your document's head now, like so:

And then adding the correct class to output the icon of a particular theme.

The color of the icons can be changed using CSS as well.

Note: the Two-tone theme icons are a bit glitchy at present.

Update (14/11/) : List of 16 outline icons that work with the "_outline" suffix.

Here's the most recent list of 16 outline icons that work with the regular Material-icons Webfont, using the _outline suffix (tested and confirmed).

(As found on the material-design-icons github page. Search for: "_outline_diseinuak4web.net")

Note that pie_chart needs to be "pie_chart_outlined" and not outline.

This is a hack to test out the new icon themes using an inline tag. It's not the official solution.

As of today (July 19, ), a little over 2 months since the new icons themes were introduced, there is No Way to include these icons using an inline tag .

+Martin has pointed out that there's an issue raised on Github regarding the same: diseinuak4web.net

So, until Google comes up with a solution for this, I've started using a hack to include these new icon themes in my development environment before downloading the appropriate icons as SVG or PNG. And I thought I'd share it with you all.

IMPORTANT: Do not use this on a production environment as each of the included CSS files from Google are over 1MB in size.

Google uses these stylesheets to showcase the icons on their demo page:

Outline:

Rounded:

Two-Tone:

Sharp:

Each of these files contain the icons of the respective themes included as background-images (Base64 image-data). And here's how we can use this to test out the compatibility of a particular icon in our design before downloading it for use in the production environment.

STEP 1:

Include the stylesheet of the theme that you want to use. Eg: For the 'Outlined' theme, use the stylesheet for 'diseinuak4web.net'

STEP 2:

Add the following classes to your own stylesheet:

STEP 3:

Use the icon by adding the following classes to the tag:

1. class

2. Icon name as shown on the material icons demo page, prefixed with the theme name followed by a hyphen.

Prefixes:

Outlined:

Rounded:

Two-Tone:

Sharp:

Eg (for 'announcement' icon):

, , ,

3) Use an optional 3rd class for inverting the color from black to white (for dark backgrounds)

Changing icon size:

Since this is a background-image and not a font-icon, use the and properties of CSS to modify the size of the icons. The default is set to 24px in the class.

Example:

Case I: For the Outlined Theme of the account_circle icon:

1. Include the stylesheet:

1. Add the icon tag on your page:

Optional (For dark backgrounds):

Case II: For the Sharp Theme of the assessment icon:

1. Include the stylesheet:

1. Add the icon tag on your page:

(For dark backgrounds):

I can't stress enough that this is NOT THE RIGHT WAY to include the icons on your production environment. But if you have to scan through multiple icons on your in-development page, it does make the icon inclusion pretty easy and saves a lot of time.

Downloading the icon as SVG or PNG sure is a better option when it comes to site-speed optimization, but font-icons are a time-saver when it comes to the prototyping phase and checking if a particular icon goes with your design, etc.

I will update this post if and when Google comes up with a solution for this issue that does not involve downloading an icon for usage.