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

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:

body {
  font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
  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;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
}

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
  font-family: 'Material Icons Two Tone';
}

.material-icons-round,
.material-icons.material-icons--round {
  font-family: 'Material Icons Round';
}

.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-family: 'Material Icons Sharp';
}

  



  

    
Baseline
    home
    assignment
  
  

    
Outlined
    home
    assignment
  
  

    
Two tone
    home
    assignment
  
  

    
Rounded
    home
    assignment
  
  

    
Sharp
    home
    assignment
  

Or view it on Codepen

---

EDIT: As of 10 March 2019, it appears that there are now classes for the new font icons:

body {
  font-family: Roboto, sans-serif;
}

  



  

    
Baseline
    home
    assignment
  
  

    
Outlined
    home
    assignment
  
  

    
Two tone
    home
    assignment
  
  

    
Rounded
    home
    assignment
  
  

    
Sharp
    home
    assignment
  

EDIT #2: Here's a workaround to tint two-tone icons by using CSS image filters (code adapted from this comment):

body {
  font-family: Roboto, sans-serif;
}

.material-icons-two-tone {
  filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
  font-size: 48px;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
  color: #0099ff;
  font-size: 48px;
}

  



  

    
Baseline
    home
    assignment
  
  

    
Outlined
    home
    assignment
  
  

    
Two tone
    home
    assignment
  
  

    
Rounded
    home
    assignment
  
  

    
Sharp
    home
    assignment
  

Or view it on Codepen