How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

Question

Google has revamped its Material Design Icons with 4 new preset themes:

Outlined, Rounded, Two-Tone and Sharp, in addition to the regular Fil

Answer 1

Update (31/03/2019) : 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.

donut_small
donut_small
donut_small
donut_small
donut_small

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/2018) : 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_24px.svg")

help_outline
label_outline
mail_outline
info_outline
lock_outline
lightbulb_outline
play_circle_outline
error_outline
add_circle_outline
people_outline
person_outline
pause_circle_outline
chat_bubble_outline
remove_circle_outline
check_box_outline_blank
pie_chart_outlined

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, 2018), 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: https://github.com/google/material-design-icons/issues/773

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 'outline.css'

STEP 2:

Add the following classes to your own stylesheet:

.material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}

STEP 3:

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

1. material-icons-new class

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

Prefixes:

Outlined: outline-

Rounded: round-

Two-Tone: twotone-

Sharp: sharp-

Eg (for 'announcement' icon):

outline-announcement, round-announcement, twotone-announcement, sharp-announcement

3) Use an optional 3rd class icon-white 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 height and width properties of CSS to modify the size of the icons. The default is set to 24px in the material-icons-new class.

---

Example:

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

1. Include the stylesheet:

2. 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:

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