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?
Best 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:
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/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")
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:
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:
STEP 3:
Use the icon by adding the following classes to the
<i>
tag:material-icons-new
classIcon 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
andwidth
properties of CSS to modify the size of the icons. The default is set to 24px in thematerial-icons-new
class.Example:
Case I: For the Outlined Theme of the account_circle icon:
Optional (For dark backgrounds):
Case II: For the Sharp Theme of the assessment icon:
(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.