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?

User · Answer

Setting up the Two-tone color   As described above you can use the color css key except for materials Two-tone theme which seems to be glitchy  -   A workaround is described in one of several angular material github issue s by using a custom css filter  This custom filter can be generated here   E g    Html    lt link rel  stylesheet  href  https   fonts googleapis com css family Material Icons Material Icons Outlined Material Icons Round Material Icons Two Tone Material Icons Sharp  gt    lt i class  material-icons-two-tone red  gt home lt  i gt    css    red   filter  invert 8   sepia 94   saturate 4590   hue-rotate 358deg  brightness 101   contrast 112        Attachments    Working Angular Stackblitz Codepen example Codepen CSS filter Generator

User · Answer

New themes are probably not  yet   part of the Material Icons font  Link

User · Answer

If you already have material-icons working in your web project  just need to update your reference in the html file and the used class for icons   html reference   Before   lt link href  https   fonts googleapis com icon family Material Icons  rel  stylesheet    gt    After   lt 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    gt    material icons class   After that just check wich className are you using   Before    lt i className  material-icons  gt weekend lt  i gt    After    lt i className  material-icons-outlined  gt weekend lt  i gt    that works for me    Pura vida

User · Answer

The webfonts link works now  in all browsers  Simply add your themes to the font link separated by a pipe      like this  lt link href  quot https   fonts googleapis com icon family Material Icons Material Icons Outlined quot  rel  quot stylesheet quot  gt   Then reference the class  like this     class  quot material-icons quot  or class  quot material-icons-outlined quot    lt i class  quot material-icons quot  gt account balance lt  i gt   lt i class  quot material-icons-outlined quot  gt account balance lt  i gt   This pattern will also work with Angular Material   lt mat-icon gt account balance lt  mat-icon gt   lt mat-icon class  quot material-icons-outlined quot  gt account balance lt  mat-icon gt

User · Answer

None of the answers so far explains how to download the various variants of that font so that you can serve them from your own website (WWW server).

While this might seem like a minor issue from the technical perspective, it is a big issue from the legal perspective, at least if you intend to present your pages to any EU citizen (or even, if you do that by accident). This is even true for companies which reside in the US (or any country outside the EU).

If anybody is interested why this is, I'll update this answer and give some more details here, but at the moment, I don't want to waste too much space off-topic.

Having said this:

I've downloaded all versions (regular, outlined, rounded, sharp, two-tone) of that font following two very easy steps (it was @Aj334's answer to his own question which put me on the right track) (example: "outlined" variant):

Get the CSS from the Google CDN by directly letting your browser fetch the CSS URL, i.e. copy the following URL into your browser's location bar:

https://fonts.googleapis.com/css?family=Material+Icons+Outlined

This will return a page which looks like this (at least in Firefox 70.0.1 at the time of writing this):

/* fallback */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

Find the line starting with src: in the above code, and let your browser fetch the URL contained in that line, i.e. copy the following URL into your browser's location bar:
```
https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2
```
Now the browser will download that .woff2 file and offer to save it locally (at least, Firefox did).

Two final remarks:

Of course, you can download the other variants of that font using the same method. In the first step, just replace the character sequence Outlined in the URL by the character sequences Round (yes, really, although here it's called "Rounded" in the left navigation menu), Sharp or Two+Tone, respectively. The result page will look nearly the same each time, but the URL in the src: line of course is different for each variant.

Finally, in step 1, you even can use that URL:

https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

This will return the CSS for all variants in one page, which then contains five src: lines, each one with another URL designating where the respective font is located.

User · Answer

Somewhat hilariously  Google has made a font that works correctly in Safari but not in Chrome  Here s the https   codepen io anon pen zbavza   lt i class  material-icons-round red  gt warning lt  i gt      In reference to https   stackoverflow com a 54902967 4740291 and not being able to change the color using css

User · Answer

As of 27 February 2019  there are CSS fonts for the new Material Icon themes   However  you have to create CSS classes to use the fonts   The font families are as follows    Material Icons Outlined - Outlined icons Material Icons Two Tone - Two-tone icons Material Icons Round - Rounded icons Material Icons Sharp - Sharp icons   See the code sample below for an example    x000D   x000D  body   x000D    font-family  Roboto  sans-serif  x000D    x000D   x000D   material-icons-outlined  x000D   material-icons material-icons--outlined  x000D   material-icons-two-tone  x000D   material-icons material-icons--two-tone  x000D   material-icons-round  x000D   material-icons material-icons--round  x000D   material-icons-sharp  x000D   material-icons material-icons--sharp   x000D    font-weight  normal  x000D    font-style  normal  x000D    font-size  24px  x000D    line-height  1  x000D    letter-spacing  normal  x000D    text-transform  none  x000D    display  inline-block  x000D    white-space  nowrap  x000D    word-wrap  normal  x000D    direction  ltr  x000D    -webkit-font-feature-settings   liga   x000D    -webkit-font-smoothing  antialiased  x000D    x000D   x000D   material-icons-outlined  x000D   material-icons material-icons--outlined   x000D    font-family   Material Icons Outlined   x000D    x000D   x000D   material-icons-two-tone  x000D   material-icons material-icons--two-tone   x000D    font-family   Material Icons Two Tone   x000D    x000D   x000D   material-icons-round  x000D   material-icons material-icons--round   x000D    font-family   Material Icons Round   x000D    x000D   x000D   material-icons-sharp  x000D   material-icons material-icons--sharp   x000D    font-family   Material Icons Sharp   x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt link rel  stylesheet  href  https   fonts googleapis com css family Roboto 300 400 500 Material Icons Material Icons Outlined Material Icons Two Tone Material Icons Round Material Icons Sharp  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt section id  original  gt  x000D       lt h2 gt Baseline lt  h2 gt  x000D       lt i class  material-icons  gt home lt  i gt  x000D       lt i class  material-icons  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  outlined  gt  x000D       lt h2 gt Outlined lt  h2 gt  x000D       lt i class  material-icons-outlined  gt home lt  i gt  x000D       lt i class  material-icons material-icons--outlined  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  two-tone  gt  x000D       lt h2 gt Two tone lt  h2 gt  x000D       lt i class  material-icons-two-tone  gt home lt  i gt  x000D       lt i class  material-icons material-icons--two-tone  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  rounded  gt  x000D       lt h2 gt Rounded lt  h2 gt  x000D       lt i class  material-icons-round  gt home lt  i gt  x000D       lt i class  material-icons material-icons--round  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  sharp  gt  x000D       lt h2 gt Sharp lt  h2 gt  x000D       lt i class  material-icons-sharp  gt home lt  i gt  x000D       lt i class  material-icons material-icons--sharp  gt assignment lt  i gt  x000D     lt  section gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Or view it on Codepen    EDIT  As of 10 March 2019  it appears that there are now classes for the new font icons    x000D   x000D  body   x000D    font-family  Roboto  sans-serif  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt link rel  stylesheet  href  https   fonts googleapis com css family Roboto 300 400 500 Material Icons Material Icons Outlined Material Icons Two Tone Material Icons Round Material Icons Sharp  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt section id  original  gt  x000D       lt h2 gt Baseline lt  h2 gt  x000D       lt i class  material-icons  gt home lt  i gt  x000D       lt i class  material-icons  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  outlined  gt  x000D       lt h2 gt Outlined lt  h2 gt  x000D       lt i class  material-icons-outlined  gt home lt  i gt  x000D       lt i class  material-icons-outlined  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  two-tone  gt  x000D       lt h2 gt Two tone lt  h2 gt  x000D       lt i class  material-icons-two-tone  gt home lt  i gt  x000D       lt i class  material-icons-two-tone  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  rounded  gt  x000D       lt h2 gt Rounded lt  h2 gt  x000D       lt i class  material-icons-round  gt home lt  i gt  x000D       lt i class  material-icons-round  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  sharp  gt  x000D       lt h2 gt Sharp lt  h2 gt  x000D       lt i class  material-icons-sharp  gt home lt  i gt  x000D       lt i class  material-icons-sharp  gt assignment lt  i gt  x000D     lt  section gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    EDIT  2  Here s a workaround to tint two-tone icons by using CSS image filters  code adapted from this comment     x000D   x000D  body   x000D    font-family  Roboto  sans-serif  x000D    x000D   x000D   material-icons-two-tone   x000D    filter  invert 0 5  sepia 1  saturate 10  hue-rotate 180deg   x000D    font-size  48px  x000D    x000D   x000D   material-icons  x000D   material-icons-outlined  x000D   material-icons-round  x000D   material-icons-sharp   x000D    color   0099ff  x000D    font-size  48px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt link rel  stylesheet  href  https   fonts googleapis com css family Roboto 300 400 500 Material Icons Material Icons Outlined Material Icons Two Tone Material Icons Round Material Icons Sharp  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt section id  original  gt  x000D       lt h2 gt Baseline lt  h2 gt  x000D       lt i class  material-icons  gt home lt  i gt  x000D       lt i class  material-icons  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  outlined  gt  x000D       lt h2 gt Outlined lt  h2 gt  x000D       lt i class  material-icons-outlined  gt home lt  i gt  x000D       lt i class  material-icons-outlined  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  two-tone  gt  x000D       lt h2 gt Two tone lt  h2 gt  x000D       lt i class  material-icons-two-tone  gt home lt  i gt  x000D       lt i class  material-icons-two-tone  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  rounded  gt  x000D       lt h2 gt Rounded lt  h2 gt  x000D       lt i class  material-icons-round  gt home lt  i gt  x000D       lt i class  material-icons-round  gt assignment lt  i gt  x000D     lt  section gt  x000D     lt section id  sharp  gt  x000D       lt h2 gt Sharp lt  h2 gt  x000D       lt i class  material-icons-sharp  gt home lt  i gt  x000D       lt i class  material-icons-sharp  gt assignment lt  i gt  x000D     lt  section gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Or view it on Codepen

User · Answer

I ended up using IcoMoon app to create a custom font using only the new themed icons I required for a recent web app build. It's not perfect but you can mimic the existing Google Font functionality pretty nicely with a little bit of setup. Here's a writeup:

https://medium.com/@leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2

If someone is feeling daring, they could convert the entire theme using IcoMoon. Hell, IcoMoon probably has an internal process that would make it easy since they already have the original Material Icons set in their library.

Anyway, this isn't a perfect solution, but it worked for me.

User · Answer

The Aj334 s recent edit works perfectly  google CDN  lt link href  quot https   fonts googleapis com css family Material Icons Material Icons Outlined Material Icons Two Tone Material Icons Round Material Icons Sharp quot  rel  quot stylesheet quot  gt   Icon Element  lt i class  quot material-icons quot  gt donut small lt  i gt   lt i class  quot material-icons-outlined quot  gt donut small lt  i gt   lt i class  quot material-icons-two-tone quot  gt donut small lt  i gt   lt i class  quot material-icons-round quot  gt donut small lt  i gt   lt i class  quot material-icons-sharp quot  gt donut small lt  i gt

User · Answer

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   lt link href  quot https   fonts googleapis com css family Material Icons Material Icons Outlined Material Icons Two Tone Material Icons Round Material Icons Sharp quot  rel  quot stylesheet quot  gt   And then adding the correct class to output the icon of a particular theme   lt i class  quot material-icons quot  gt donut small lt  i gt   lt i class  quot material-icons-outlined quot  gt donut small lt  i gt   lt i class  quot material-icons-two-tone quot  gt donut small lt  i gt   lt i class  quot material-icons-round quot  gt donut small lt  i gt   lt i class  quot material-icons-sharp quot  gt donut small lt  i gt   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  quot  outline quot  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   quot  outline 24px svg quot    lt i class  quot material-icons quot  gt help outline lt  i gt   lt i class  quot material-icons quot  gt label outline lt  i gt   lt i class  quot material-icons quot  gt mail outline lt  i gt   lt i class  quot material-icons quot  gt info outline lt  i gt   lt i class  quot material-icons quot  gt lock outline lt  i gt   lt i class  quot material-icons quot  gt lightbulb outline lt  i gt   lt i class  quot material-icons quot  gt play circle outline lt  i gt   lt i class  quot material-icons quot  gt error outline lt  i gt   lt i class  quot material-icons quot  gt add circle outline lt  i gt   lt i class  quot material-icons quot  gt people outline lt  i gt   lt i class  quot material-icons quot  gt person outline lt  i gt   lt i class  quot material-icons quot  gt pause circle outline lt  i gt   lt i class  quot material-icons quot  gt chat bubble outline lt  i gt   lt i class  quot material-icons quot  gt remove circle outline lt  i gt   lt i class  quot material-icons quot  gt check box outline blank lt  i gt   lt i class  quot material-icons quot  gt pie chart outlined lt  i gt   Note that pie chart needs to be  quot pie chart outlined quot  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  lt i class  quot material-icons quot  gt  lt  i gt    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   lt link rel  quot stylesheet quot  href  quot https   storage googleapis com non-spec-apps mio-icons latest outline css quot  gt   Rounded   lt link rel  quot stylesheet quot  href  quot https   storage googleapis com non-spec-apps mio-icons latest round css quot  gt   Two-Tone   lt link rel  quot stylesheet quot  href  quot https   storage googleapis com non-spec-apps mio-icons latest twotone css quot  gt   Sharp   lt link rel  quot stylesheet quot  href  quot https   storage googleapis com non-spec-apps mio-icons latest sharp css quot  gt   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  lt i gt  tag   material-icons-new class  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   Include the stylesheet    lt link rel  quot stylesheet quot  href  quot https   storage googleapis com non-spec-apps mio-icons latest outline css quot  gt    Add the icon tag on your page    lt i class  quot material-icons-new outline-account circle quot  gt  lt  i gt   Optional  For dark backgrounds    lt i class  quot material-icons-new outline-account circle icon-white quot  gt  lt  i gt    Case II  For the Sharp Theme of the assessment icon   Include the stylesheet    lt link rel  quot stylesheet quot  href  quot https   storage googleapis com non-spec-apps mio-icons latest sharp css quot  gt    Add the icon tag on your page    lt i class  quot material-icons-new sharp-assessment quot  gt  lt  i gt    For dark backgrounds    lt i class  quot material-icons-new sharp-assessment icon-white quot  gt  lt  i gt    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

User · Answer

For angular material you should use fontSet input to change the font family    lt 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    gt    lt mat-icon gt edit lt  mat-icon gt   lt mat-icon fontSet  material-icons-outlined  gt edit lt  mat-icon gt   lt mat-icon fontSet  material-icons-two-tone  gt edit lt  mat-icon gt

User · Answer

What worked for me is using  outline not  outlined after the icon name    lt mat-icon gt info lt  mat-icon gt    vs    lt mat-icon gt info outline lt  mat-icon gt

User · Answer

Put in head link to google styles   lt link href  https   fonts googleapis com icon family Material Icons Outlined  rel  stylesheet  gt    and in body something like this    lt i class  material-icons-outlined  gt bookmarks lt  i gt

User · Answer

I was unsatisfied that until know Google hasn't yet released their new designs as font or svg icon set. Therefore I put together a small npm package to solve the problem.

https://www.npmjs.com/package/ts-material-icons-svg

Simply import the icons you wanna use and add them to your registry. This also supports tree shaking since only those icons are added to your project that you really want and/or need.

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

to use two tone icons for example

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

In your html template you now can use the new icon

<mat-icon svgIcon="edit"></mat-icon>

User · Answer

As of 12 05 2020  You need to 1  include CSS   lt link href  quot https   fonts googleapis com css family Material Icons Material Icons Outlined Material Icons Two Tone Material Icons Round Material Icons Sharp quot  rel  quot stylesheet quot  gt   2  Use it like this   lt i class  quot material-icons quot  gt account balance lt  i gt   lt i class  quot material-icons material-icons-outlined quot  gt account balance lt  i gt   lt i class  quot material-icons material-icons-two-tone quot  gt account balance lt  i gt   lt i class  quot material-icons material-icons-sharp quot  gt account balance lt  i gt   lt i class  quot material-icons material-icons-round quot  gt account balance lt  i gt   Note  For example  to use outlined style  You need to specify material-icons AND material-icons-outlined classes

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

The answer is

The webfonts link works now, in all browsers!

google CDN

Icon Element

As of 12/05/2020, You need to

Examples related to icons

Examples related to material-design

Examples related to google-material-icons

Tags