Material-design-icons: Are the new themes of icons available on Google Fonts?
Recently four new themes of icons are available: outlined, rounded, two tone, and sharp. Are these available on Google fonts? If not is there a timeline on when they will be added? Thanks.
steventango
All 82 comments
Interrested too !
WizardPC
on 17 May 2018
Please this! With the introduction of themes themes are now required in order to use the outlined version of several important icons, such as grade. I'd like most if a class could be added to change the theme, however, adding a prefix/suffix would be great too!
ncovercash
on 22 May 2018
Maybe with (BEM) modifiers:
<i class="material-icons">dashboard</i>
<i class="material-icons material-icons--outline">dashboard</i>
ahlechandre
on 22 May 2018
@ahlechandre Looks good! For the CSS from google fonts, it shouldn't be too hard. Just like:
/* Default from https://fonts.googleapis.com/css?family=Material+Icons */
.material-icons {
font-family: 'Material Icons';
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;
}
/* Added */
.material-icons.material-icons--outline {
font-family: 'Material Icons Outline';
}
Shouldn't be a complex change, would just need to serve multiple fonts.
ncovercash
on 22 May 2018
+1
richardriman
on 24 May 2018
+1
ChillkroeteTTS
on 28 May 2018
+1
RemusGrigorescu
on 28 May 2018
+1
duncandean
on 29 May 2018
+1
devhitech
on 6 Jun 2018
+1
nrone
on 7 Jun 2018
+1
Ghkuijer
on 7 Jun 2018
+1
udscbt-wsx
on 10 Jun 2018
+1
ThePlastic
on 11 Jun 2018
Most of you probably know this, but you can actually access a couple of icons in the outlined theme. To use them with web-fonts you simply use:
<i class="material-icons">lock_outline</i>
instead of:
<i class="material-icons">lock</i>
To find whether or not an icon is available in the outlined theme simply search the github repo for icons with _outline_24px.svg in their file name.
It's not a lot, but at least it's something.
Brgds
ViAndersson
on 12 Jun 2018
How about the rounded theme? Anybody managed to make it work? Tried @smileytechguy's approach, didn't worked.
fc-janharold
on 19 Jun 2018
+1
marcoocram
on 19 Jun 2018
+1
joe-kimlinger
on 19 Jun 2018
@fc-janharold My "approach" was simply a suggestion as to how the team at Google could serve these icons without breaking backwards compatibility or making things awkward. It hasn't been implemented (and may not ever be)
ncovercash
on 20 Jun 2018
+1
TallOrderDev
on 21 Jun 2018
+1
iamstevendao
on 22 Jun 2018
+1
robrwo
on 22 Jun 2018
+1
marceloromaomultilaser
on 25 Jun 2018
+1, subbed. Outlines look like a fantastic addition
stephengardner
on 26 Jun 2018
Oh, I thought it's already working. @smileytechguy, thanks for the clarification.
fc-janharold
on 26 Jun 2018
+1
philmarc
on 27 Jun 2018
+1
BN-Delaney
on 27 Jun 2018
+1
pjtsearch
on 28 Jun 2018
+1 Looking forward to being able to use the rounded variations!
chrisguerrero
on 29 Jun 2018
+1
Jule-
on 29 Jun 2018
+1
ahmed3hamdan
on 30 Jun 2018
+1
carlosrovira
on 30 Jun 2018
+1
raphael22
on 2 Jul 2018
+1
AdrianDanielGarcia
on 3 Jul 2018
+1
hblondeau
on 4 Jul 2018
Hey folks, the font is actually available. Looks like the spec hasn't been finalized yet? We need to wait for them to finalize, test, publish, etc.
I am not sure what the spec is going to look like but for those who want to have a non-spec implementation, you could do the following to match what the material icons website does:
Import the following 6 style sheets made available on the material icons page:
- https://storage.googleapis.com/non-spec-apps/mio-icons/latest/styles.css
- https://storage.googleapis.com/non-spec-apps/mio-icons/latest/baseline.css
- https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css
- https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css
- https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css
- https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css
Then use the same markup as the website (seems to be similar to fontawesome?)
<i class="baseline-router icon-image-preview"></i>
<i class="outline-router icon-image-preview"></i>
<i class="round-router icon-image-preview"></i>
<i class="twotone-router icon-image-preview"></i>
<i class="sharp-router icon-image-preview"></i>
Here is a sample HTML file that demonstrates what is needed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Material Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/styles.css">
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/baseline.css">
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">
<style>
.pad {
padding: 10px;
}
.round-corners {
border-radius: 8px;
}
.my-0 {
margin-top: 0px;
margin-bottom: 0px;
}
.underline {
width: 100px;
height: 2px;
border-radius: 1px;
background-color: currentColor;
margin-top: 12px;
}
</style>
</head>
<body class="mdc-typography">
<header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
<span class="mdc-toolbar__title">Material Icons</span>
</section>
</div>
</header>
<main>
<div class="mdc-toolbar-fixed-adjust">
<div class="demo-grid mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12 mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone mdc-elevation--z2 pad round-corners">
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Imports</h3>
<div class="mdc-list-group__subheader underline"></div>
<ul class="mdc-list">
<li class="mdc-list-item">Import the following 6 stylesheets made available by google:</li>
<li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/styles.css</li>
<li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/baseline.css</li>
<li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css</li>
<li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css</li>
<li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css</li>
<li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css</li>
</ul>
<h3 class="mdc-list-group__subheader">Filled/Baseline</h3>
<div class="mdc-list-group__subheader underline"></div>
<ul class="mdc-list demo-list">
<li class="mdc-list-item"><i class="baseline-router icon-image-preview"></i></li>
<li class="mdc-list-item"><i class="baseline-router icon-image-preview"></i></li>
</ul>
<h3 class="mdc-list-group__subheader">Outline</h3>
<div class="mdc-list-group__subheader underline"></div>
<ul class="mdc-list demo-list">
<li class="mdc-list-item"><i class="outline-router icon-image-preview"></i></li>
<li class="mdc-list-item"><i class="outline-router icon-image-preview"></i></li>
</ul>
<h3 class="mdc-list-group__subheader">Round</h3>
<div class="mdc-list-group__subheader underline"></div>
<ul class="mdc-list demo-list">
<li class="mdc-list-item"><i class="round-router icon-image-preview"></i></li>
<li class="mdc-list-item"><i class="round-router icon-image-preview"></i></li>
</ul>
<h3 class="mdc-list-group__subheader">Two-Tone</h3>
<div class="mdc-list-group__subheader underline"></div>
<ul class="mdc-list demo-list">
<li class="mdc-list-item"><i class="twotone-router icon-image-preview"></i></li>
<li class="mdc-list-item"><i class="twotone-router icon-image-preview"></i></li>
</ul>
<h3 class="mdc-list-group__subheader">Sharp</h3>
<div class="mdc-list-group__subheader underline"></div>
<ul class="mdc-list demo-list">
<li class="mdc-list-item"><i class="sharp-router icon-image-preview"></i></li>
<li class="mdc-list-item"><i class="sharp-router icon-image-preview"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
samstride
on 5 Jul 2018
Thanks @samstride , is that also the reason why the "normal" (filled?) style font in this repo is missing a bunch of icons from the index site? If so, is there a different (public) package or repo where the non-final fonts are distributed? If not, do you have any information about why this package isn't up to date with the released / approved fonts? (c.f. #786 )
thw0rted
on 5 Jul 2018
@samstride Thanks for the links but it's more useful to have a font file rather png in css to be able to change the foreground color.
ltrillaud
on 5 Jul 2018
@thw0rted ,
is that also the reason why the "normal" (filled?) style font in this repo is missing a bunch of icons from the index site?
Maybe. Sorry, no idea when Google will release the final spec.
@ltrillaud , I agree. This was merely an idea for people wanting to use the new icons. I am sticking to the font file myself and will wait for the spec to be final.
samstride
on 6 Jul 2018
@eelcowen contacted some Google employees and got this statement:
We expect to update the Material Icon Font (and the github repo) in the future, but don't have a timeline for this update at this time. Sorry for the inconvenience.
https://github.com/google/material-design-icons/issues/786#issuecomment-403215569
steventango
on 10 Jul 2018
+1
please provide outlined fonts in *symbol.svg format
toli-belo
on 11 Jul 2018
+1
wdunn001
on 31 Jul 2018
+1
makitsune
on 2 Aug 2018
+1
jamesmoralee
on 3 Aug 2018
+1
jottocraft
on 4 Aug 2018
+1
BrutalPRO
on 6 Aug 2018
Hey guys, 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.
leemartin
on 15 Aug 2018
+1
rhyttr
on 19 Aug 2018
+1
philfleck
on 20 Aug 2018
+1
aissaghouti
on 20 Aug 2018
Please stop responding "+1". You can use the "react" button (+:smiley:, top right) to add a thumbs-up reaction to the top level post. Responding floods the inboxes of probably over a hundred users with an email notification that wastes everybody's time.
thw0rted
on 20 Aug 2018
If anyone's interested, I've hacked together a small script to be able to use the latest icons in react apps.
kombucha
on 20 Aug 2018
+1
anandveld
on 10 Sep 2018
@cptawakward Did you even read the whole thread? See what @thw0rted said.
EdricChan03
on 11 Sep 2018
+1
makitsune
on 11 Sep 2018
@makitsune Please don't add a +1 as well. It would be better to react to the message at the top of this comment thread. Adding +1s will definitely not help at all.
EdricChan03
on 11 Sep 2018
I think what will really help would be some official response from persons in charge here in this repo, so we can know something about plans/roadmap. I think I'm not asking nothing that could not be shared. Thanks for any comment on that front.
carlosrovira
on 11 Sep 2018
We're quite underwater on this project.
We do intend to release these icons as an icon font, but I can't predict how soon.
Please don't hold your breath ;-)
jestelle
on 17 Sep 2018
High Josh, great news! I think many people here (and outside) are waiting for this, so great to hear that you're working on this. So keep up the great work!, we'll wait for this to happen! :)
Thanks
carlosrovira
on 17 Sep 2018
Sorry, holding my breath anyway. This is somewhat frustrating :(
artiomchi
on 18 Sep 2018
No sure why this request has turned out to be too complex to handle.
If this is because of some characters are not ready yet, couldn't it be (initially) released with fallback, eg:
https://fonts.googleapis.com/css?family=Material+Icons+Outlined =>
.material-icons {
font-family: 'Material Icons Outlined', 'Material Icons';
...
This would allow taking existing icons into use while the team has time to fill missing gaps.
PRR24
on 11 Oct 2018
Hey folks, the font is actually available. Looks like the spec hasn't been finalized yet? We need to wait for them to finalize, test, publish, etc.
I am not sure what the spec is going to look like but for those who want to have a non-spec implementation, you could do the following to match what the material icons website does:
Import the following 6 style sheets made available on the material icons page:
* https://storage.googleapis.com/non-spec-apps/mio-icons/latest/styles.css * https://storage.googleapis.com/non-spec-apps/mio-icons/latest/baseline.css * https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css * https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css * https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css * https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.cssThen use the same markup as the website (seems to be similar to fontawesome?)
<i class="baseline-router icon-image-preview"></i> <i class="outline-router icon-image-preview"></i> <i class="round-router icon-image-preview"></i> <i class="twotone-router icon-image-preview"></i> <i class="sharp-router icon-image-preview"></i>Here is a sample HTML file that demonstrates what is needed.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Material Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/styles.css"> <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/baseline.css"> <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css"> <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css"> <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css"> <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css"> <style> .pad { padding: 10px; } .round-corners { border-radius: 8px; } .my-0 { margin-top: 0px; margin-bottom: 0px; } .underline { width: 100px; height: 2px; border-radius: 1px; background-color: currentColor; margin-top: 12px; } </style> </head> <body class="mdc-typography"> <header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar"> <div class="mdc-toolbar__row"> <section class="mdc-toolbar__section mdc-toolbar__section--align-start"> <span class="mdc-toolbar__title">Material Icons</span> </section> </div> </header> <main> <div class="mdc-toolbar-fixed-adjust"> <div class="demo-grid mdc-layout-grid"> <div class="mdc-layout-grid__inner"> <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12 mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone mdc-elevation--z2 pad round-corners"> <div class="mdc-list-group"> <h3 class="mdc-list-group__subheader">Imports</h3> <div class="mdc-list-group__subheader underline"></div> <ul class="mdc-list"> <li class="mdc-list-item">Import the following 6 stylesheets made available by google:</li> <li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/styles.css</li> <li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/baseline.css</li> <li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css</li> <li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css</li> <li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css</li> <li class="mdc-list-item">https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css</li> </ul> <h3 class="mdc-list-group__subheader">Filled/Baseline</h3> <div class="mdc-list-group__subheader underline"></div> <ul class="mdc-list demo-list"> <li class="mdc-list-item"><i class="baseline-router icon-image-preview"></i></li> <li class="mdc-list-item"><i class="baseline-router icon-image-preview"></i></li> </ul> <h3 class="mdc-list-group__subheader">Outline</h3> <div class="mdc-list-group__subheader underline"></div> <ul class="mdc-list demo-list"> <li class="mdc-list-item"><i class="outline-router icon-image-preview"></i></li> <li class="mdc-list-item"><i class="outline-router icon-image-preview"></i></li> </ul> <h3 class="mdc-list-group__subheader">Round</h3> <div class="mdc-list-group__subheader underline"></div> <ul class="mdc-list demo-list"> <li class="mdc-list-item"><i class="round-router icon-image-preview"></i></li> <li class="mdc-list-item"><i class="round-router icon-image-preview"></i></li> </ul> <h3 class="mdc-list-group__subheader">Two-Tone</h3> <div class="mdc-list-group__subheader underline"></div> <ul class="mdc-list demo-list"> <li class="mdc-list-item"><i class="twotone-router icon-image-preview"></i></li> <li class="mdc-list-item"><i class="twotone-router icon-image-preview"></i></li> </ul> <h3 class="mdc-list-group__subheader">Sharp</h3> <div class="mdc-list-group__subheader underline"></div> <ul class="mdc-list demo-list"> <li class="mdc-list-item"><i class="sharp-router icon-image-preview"></i></li> <li class="mdc-list-item"><i class="sharp-router icon-image-preview"></i></li> </ul> </div> </div> </div> </div> </div> </main> </body> </html>
This is just a hack, not an efficient way of using it. The solution is simply addind background-image, that we can do in general css, so no need to import such large css in our project. Just get css & png images of the icons from these files and use it.
malav93
on 12 Nov 2018
Definitely not an ideal solution, since it uses png instead of svg.
At this point it might be a good idea to simply download all the csv icons, pop them into Icomoon and use that.
Atulin
on 18 Nov 2018
Got tired of this issue and just fixed the font myself with some help around the forum. you can specify each style via ligatures and loading the font. Can find errthang here: https://peter.ng/material-icons
petergng
on 26 Nov 2018
Hi Peter,
thanks for sharing, very interesting :)
About two color icons, can we use with your font? thanks
carlosrovira
on 26 Nov 2018
Doing god's work Google didn't do, thank you!
Atulin
on 26 Nov 2018
About two color icons, can we use with your font? thanks
I'm not sure if fonts have a capability for handling multicolor? But if you have a reference i'm sure we could make that happen. Another thought would be to split out a material_multi_fg and material_multi_bg and make someone specify the two fonts overlayed
petergng
on 26 Nov 2018
Hi Peter,
didn't think in font support for two-tone fonts, maybe can't be doable.
I should investigate that as I have some free time (nothing soon I'm afraid), maybe something in the terms you comment about some js-css where we have 2 fonts overlapped could be a way...
Thanks for your comments :)
carlosrovira
on 27 Nov 2018
For use with Angular Material (7+)
MarcusCalidus
on 15 Dec 2018
Hi guys! I do this:
https://github.com/cguilhermef/material-icons-outline
Just using Icomoon, uploading all of the svg icons, some configuration and... well, now you have the outlined version.
cguilhermef
on 23 Jan 2019
No sure why this request has turned out to be too complex to handle.
If this is because of some characters are not ready yet, couldn't it be (initially) released with fallback, eg:
https://fonts.googleapis.com/css?family=Material+Icons+Outlined =>.material-icons { font-family: 'Material Icons Outlined', 'Material Icons'; ...This would allow taking existing icons into use while the team has time to fill missing gaps.
(See https://github.com/google/material-design-icons/issues/773#issuecomment-428854482)
It appears that the link you added actually works (EDIT: as in it shows a font declaration), but there's currently no CSS defined for a class. EDIT (10 Mar 2019): There are now CSS classes for the new font icons.
After a few minutes of manually checking the links for the other Material icon variants, they all work but also have no CSS classes defined. EDIT (10 Mar 2019): There are now CSS classes for the new font icons.
I also have created a Codepen confirming that the icons are rendering correctly.
EdricChan03
on 27 Feb 2019
@Chan4077 that is wonderful and very helpful, thanks!
However, I cannot color the outlined fonts, or any other versions! It is always black.
I edited your Codepen to show my example, note how only the baseline is red:
https://codepen.io/rodrigocoelhoc/pen/bZjxrr
Anyone knows why? or have a workaround using the official https://fonts.googleapis.com/css?family=Material+Icons+Outlined ?
Thanks!
Rodrigocoelhojr
on 19 Mar 2019
Everything except two-tone is red for me. Both firefox 65 and chrome 72 on linux.
KaelWD
on 20 Mar 2019
@KaelWD really? you are not seeing the outline (and all the others) in Black and White?
Rodrigocoelhojr
on 20 Mar 2019
weird
KaelWD
on 20 Mar 2019
@KaelWD, is that in Windows / OSX ?
anckaertr
on 21 Mar 2019
Have the same issue with icon colors in Chrome and Firefox on Mac OS. However, the color works as expected in Safari and on all browsers on Windows.
amedviediev
on 21 Mar 2019
@petergng what font application do you use?
jstgermain
on 25 Mar 2019
@Rodrigocoelhojr @KaelWD Testing the color CSS property on the font icons has revealed that they support the color property with the exception of the two-tone icons.
EdricChan03
on 28 Mar 2019
The two tone font can't use color:red but it should be able to use fill:red (but that doesn't work) Looking in chrome dev tools the fill is set to black, rgb(0,0,0) ... You can however use some filters, but not all filter: invert(1) for white, filter: invert(0.5) for grey ... bad sadly you can't seem to filter:sepia(1) invert(0.5) hue-rotate(45deg); to get a custom color....
Oh Nice
Colored Two Tone Material Design icons:
.material-icons-two-tone {
// Bright blue icons
filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
}
Without hue-rotate the saturated sepia color will be orange, then you just hue-rotate it to whatever color you want. Reduce the saturate value for duller tones.
Codepen: https://codepen.io/sphism/pen/xeaGPW
sphism
on 23 Apr 2019
As of today, it seems that the Material.io Icons website is now using the icon fonts instead of the former method:
The SVG/PNG exports for an icon are now pinpointing to the resource where it is hosted (at Google Fonts):
Looking at the XHR requests for the site, it seems that the icons are retrieved from this URL: https://fonts.google.com/metadata/icons (P.S. This is a slightly malformed JSON file, just remove the preceding malformed data - )]}')
Here's what the file looks like without the preceding malformed data (shortened):
{
"host": "fonts.gstatic.com",
"asset_url_pattern": "/s/i/{family}/{icon}/v{version}/{asset}",
"families": [
"Material Icons",
"Material Icons Outlined",
"Material Icons Round",
"Material Icons Sharp",
"Material Icons Two Tone"
],
"icons": [
{
"name": "360",
"version": 1,
"unsupported_families": [],
"categories": [
"maps"
],
"tags": []
},
{
"name": "3d_rotation",
"version": 1,
"unsupported_families": [],
"categories": [
"action"
],
"tags": []
},
// ...
]
}
(See the metadata file for more info)
Attachments:
EdricChan03
on 12 Sep 2019
hot to get outlined fonts ??
zainulabedin-abs
on 11 Aug 2020
The new font files can now be found in the font directory, introduced as part of #1055 :tada:.
EdricChan03
on 20 Aug 2020
Related issues
santoshban
路
176Comments
curthard89
路
20Comments
tomwanzek
路
53Comments
miguel-orange
路
20Comments
JSMike
路
29Comments
Most helpful comment
Maybe with (BEM) modifiers: