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 Filled/Baseline theme:

---

But, unfortunately, it doesn't say anywhere how to use the new themes.

---

I've been using it via Google Web Fonts by including the link:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

And then using the required icon as suggested in the documentation:

<i class="material-icons">account_balance</i>

But it always shows the 'Filled/Baseline' version.

---

I've tried doing the following to use the Outlined theme instead:

<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

and, changing the Web Fonts link to:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" rel="stylesheet">

etc. But it doesn't work.

---

And there's no point in taking shots in the dark like that.

---

tl;dr: Has anyone tried using the new themes? Does it even work like the baseline version (inline html tag)? Or, is it only meant to be downloaded as SVG or PNG formats?

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:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

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

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>

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")

<i class="material-icons">help_outline</i>
<i class="material-icons">label_outline</i>
<i class="material-icons">mail_outline</i>
<i class="material-icons">info_outline</i>
<i class="material-icons">lock_outline</i>
<i class="material-icons">lightbulb_outline</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">add_circle_outline</i>
<i class="material-icons">people_outline</i>
<i class="material-icons">person_outline</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons">remove_circle_outline</i>
<i class="material-icons">check_box_outline_blank</i>
<i class="material-icons">pie_chart_outlined</i>

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 <i class="material-icons"></i>.

+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:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Rounded:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

Two-Tone:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

Sharp:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

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 <i> 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:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

2. Add the icon tag on your page:

<i class="material-icons-new outline-account_circle"></i>

Optional (For dark backgrounds):

<i class="material-icons-new outline-account_circle icon-white"></i>

---

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

1. Include the stylesheet:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

2. Add the icon tag on your page:

<i class="material-icons-new sharp-assessment"></i>

(For dark backgrounds):

<i class="material-icons-new sharp-assessment icon-white"></i>

---

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.