Material-design-icons: Outdated Font Files

Created on 21 May 2018  Â·  52Comments  Â·  Source: google/material-design-icons

It looks like there are many newer icons that are missing from the latest font files hosted on the github (https://github.com/google/material-design-icons/tree/master/iconfont). One of these icons includes

arrow_right

It looks like the google web font is updated (https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2), but that is only the woff2 file. Our project also uses .woff/.ttf/.eot so we would need those files as well. Since we use a local copy of our fonts, switching to the google web font is not an option.

By opening https://fonts.googleapis.com/icon?family=Material+Icons in IE, i was able to get the url to the regular woff file: https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff

Most helpful comment

Any news about this topic? It's very depressing ...

All 52 comments

Running into this too, seems like all of the new-ish added ones aren't in the iconfont files. (Or the repository at all potentially?) Would love to have this fixed, or someone from Google explain why. Thanks!

Took that woff and converted it to ttf. I could build out every weight and style too if someone can find a way to dl all the svg source.

materialicons3.zip

is there also a codepoint list?

@petergng even if I use your files for self-hosted fonts, I cannot get any of the battery icons with percentages to work, like battery_20 or battery_charging_60. I've tried in Chrome, Edge and Firefox, same thing, just empty spaces. The other battery icons always work though.

@nyankobu010 Thanks but in your Versions is the minimize icon still missing...

The regular versions of the icon are present but if you're looking for a minimize version, I would just create a custom font with the font files and just declare a specific font size for the icon font family

@font-face {
  font-family: 'Roboto-Min';
  font-style: normal;
  font-size: 5px; //  <-------------- declare the default size
  src: local('Roboto'),
  local('Roboto-Regular'),
  url('./assets/fonts/roboto/Roboto-Regular.eot') format('embedded-opentype'),
  url('./assets/fonts/roboto/Roboto-Regular.ttf') format('truetype'),
  url('./assets/fonts/roboto/Roboto-Regular.woff') format('woff'),
  url('./assets/fonts/roboto/Roboto-Regular.woff2') format('woff2');
}

Thank you, but these versions does not work with battery_20 for example. Still not there?

As you can see, I went around and found a whole bunch of issues basically asking the same thing: why are the fonts installed by NPM so outdated, and who can provide an updated (npm-installable) version? I know I could download the WOFFs myself (or whatever) but the rest of my application installs nicely with a single NPM command and I'd like to avoid having to include the fonts themselves in my source if I can help it.

Hey, @jestelle please read this issue here.

Afaik this is an official package from Google and it's literally crippled, outdated and out of sync with the online fonts and documentation.

It's time to take action

How hard would it be to manually update to the newest files in this font-file-only NPM package, or something like it? I know some people want updated SVG / PNG, but I'd settle for having a more reliable update process for font files.

It is not only that the NPM package is not up to date. The toggle_on and toggle_off icons are not included even when included from https://fonts.googleapis.com/icon?family=Material+Icons

I have been trying to get in contact with some Google employees in the last two weeks and I finally got an official statement back:

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.

Maybe we should set up our own repo, NPM package and fonts to address these problems?

Icon person_add_disabled is missing too.

Thanks @ichintan, at least it's a simple one-file download -- this won't work out of the box with Material 2 mat-icon tags, though, will it? Maybe it's a configuration option I haven't found. I'll see if anybody over there has ideas...

ETA: I'm currently using ligature-based icons, so I think converting everything to be class-based instead would be a non-trivial effort. Still, if the current NPM package stays abandoned, I might not have much choice....

Any news about this topic? It's very depressing ...

Not only are new icons missing but existing ones don't work in the fonticon
https://github.com/google/material-design-icons/issues/778

Please update!

:wave: Hi all! Like some of you, I use these icons in my projects and would _love_ to see this repository updated.

Because it seems like Google has given up maintaining this, I scraped the Material Design website and downloaded update SVGs of all of the current icons. As of today, there are 1044 icons on the website, each available in 5 "styles" (sharp, two-tone, etc.).

All 5220 of these SVGs can be found in this repository.

A few notes:

  1. I plan to make React components for them, but I haven't gotten around to it yet. I'll update this comment once I do.

  2. I know that this issue was originally about the icon font, but it has been linked to as the "repository is out of date issue" in a number of other issues, so I thought I'd share this here.

  3. This project is _super early days_. Keep that in mind! As of this time, I've only been working on it for a few hours on a lazy Sunday. There is a lot more to do 😅


I plan to keep that repository up-to-date, although I don't use the icon font. If you want to contribute a build step that generates the font, or adds support for other file types, I'd be happy to merge that in. Otherwise, if there are other features you would like to see in that repository, let me know by opening an issue there.

I hope this helps someone – thanks for reading! :v:

It looks like maybe this wouldn't be too complicated using webfonts-generator -- if I have a little spare time I might play with it. If anybody else has done it before and wants to volunteer, you'll probably be able to get it up and running faster than I will.

ETA: may have spoken too soon, webfonts-generator hasn't published an update to NPM in 2 years. Maybe I should be looking at using SVG directly?

ETA again: has anybody looked at this alternate icon set which appears to be a bit more up to date? I don't think it's affiliated with Google.

O yea, it's pretty straight forward to take a set of svg's and ouput them into multiple font families(i've done this several times before w/ the help of https://github.com/nfroidure/svgicons2svgfont and some node). The problem really is the svg source is not easily available to parse to generate the fonts. If someone wanted to download all of them manually or if someone at material wanted to push the svg source up this would be pretty trivial from my end.

Packed most recent SVG icons to be used on the web. see material-design-icons-svg

@jamesplease why not just download the updated files from the CDN, including the updated font?

That's what I did to work around the issue, however it would be awesome if the updated files were published to someone else's repo and kept up to date since Google isn't doing it.

@RyanEwen @jamesplease Even CDN files does not contains all icons.

I am also noticing missing icons. I tried using battery_20 -> batter_90 and battery_charging_20 -> battery_charging_90 and they are not showing up. I have included the icons as per the docs, using this path: https://fonts.googleapis.com/icon?family=Material+Icons

+1

My fix (which works for IE11 too):

@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url('materialIconsv41.woff2') format('woff2'), url('materialIconsv41.woff') format('woff'); }

Works for us. :)

alternate_email also missing

Hi guys, just wanted to mention that you can change v38 to v41
in this message by @nyankobu010 in link addresses and get latest versions.

But still no .svg version. If anyone has it, please, post a link here!

Hey @fallXone @ianstormtaylor @petergng @strxetics @BOLL7708 @nyankobu010 @BamiGorengo @xGouley @thw0rted @jimmykane @thw0rted @alecogt @eelcowen @Kerrick @aj1991 @RyanEwen @jamesplease @petergng @ftaiolivista @RyanEwen @fayzaan @alenvuletic @alenvuletic @CodeCrusha @gizm0bill @ericssan

This project is on low maintenance and out of date for a while.

The lack of updates + development support issues also bothered me. I've forked this repo, added support for scss, removed irrelevant files and updated the fonts with the latest straight from Google's CDN.

Check it out: material-design-icons-iconfont

image

Dope inspired me to just fix the font myself so now you can specify each style via ligatures and loading the font. Can find errthang here: https://peter.ng/material-icons

demo mov

material-icon-gen-doc mov

Heads up: if you're self hosting, you may want to update your codepoints as well: https://github.com/google/material-design-icons/pull/828

How is this still an issue ... :/

@EmmanuelVlad it simply no one cares. do it like me and use directly the svg files.

@EmmanuelVlad it simply no one cares. do it like me and use directly the svg files.

I disagree that no one cares - It looks like for an unknown reason (for over a year) Google haven't allocated any maintenance resources. I don't know the details but if Google sees more value using their employees time on other projects, who are we to judge?

It's an open source project after all... they are allowed to abandon it.
frustrating as it gets, some of us forked it.

see my previous comment

@jossef Thanks for taking the time to put together the fix. However, your release seems to have the same problem to me. For example, you do not have the battery icons and the wifi bar icons are missing or all appear with the same number of bars. Does this look the same on your browser? See this screenshot of the battery icons for example.

screenshot from 2018-12-30 16-22-51

@DomHudson Thanks!, planning to solve this ASAP #20 , I need help doing this.
please also see https://github.com/jossef/material-design-icons-iconfont/issues/22#issuecomment-440794826

I serve in this repo the officially (compiled by Google) font artifacts. Since the forked repo is abandoned, I scrape the most updated compiled fonts AS-IS straight from Google Fonts CDN (see my build.py script, I literally scrape & crossing variant user-agents)

opened #20 to customize and properly compile these webfonts
PR's are blessed!!! help-wanted

@jossef what do you need help with? Not sure I can be of much use, but I'd love to have those missing wifi/battery glyphs in the ttf for my status bar :)

@jossef what do you need help with? Not sure I can be of much use, but I'd love to have those missing wifi/battery glyphs in the ttf for my status bar :)

see https://github.com/jossef/material-design-icons-iconfont/issues/20

It would be helpful if you can create on a side branch a POC of a script (your language of preference) that generate font file from SVG files

PM me on discord - I'm python#2900

Heh, created a bunch of scripts for scrapping, sanitizing, ordering SVGs from the material icons site and then making 5 different fonts with them only to realize later that transparency for fonts is not supported, and this is the reason lots of icons are missing in the original google font. (Like signal and battery level icons. R.I.P. my Polybar upgrading plans.)

image

Should I even bother about cleaning it up and uploading it to GitHub? Generated fonts are not compatible with google ones (they have different Unicode indices), but will be compatible with their previous versions if Google will add more icons.

Heh, created a bunch of scripts for scrapping, sanitizing, ordering SVGs from the material icons site and then making 5 different fonts with them only to realize later that transparency for fonts is not supported, and this is the reason lots of icons are missing in the original google font. (Like signal and battery level icons. R.I.P. my Polybar upgrading plans.)

image

Should I even bother about cleaning it up and uploading it to GitHub? Generated fonts are not compatible with google ones (they have different Unicode indices), but will be compatible with their previous versions if Google will add more icons.

@Azumgi sounds awesome!
Would you mind collaborating with me on https://github.com/jossef/material-design-icons-iconfont/issues/20? it's exactly what you have described!

@jossef your chosen license actively prevents projects from using your solution.

@jossef your chosen license actively prevents projects from using your solution.

Honestly, I've inherited the license from this repo (since I've forked the repo from here).
I see that the licence was updated to Apache v2 after I've forked it.

I will update my forked version as well to Apache v2
https://github.com/jossef/material-design-icons-iconfont/issues/34

Thanks for the lightning!

Numbered battery icons are still missing.

meeting_room also missing

Filenames are always the same. Each file has its unique last char + filetype:
"flUhRq6tzZclQEJ-Vdg-IuiaDsN" + [ Y.eot | c.woff2 | a.woff | Z.ttf ]

EOT
https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNY.eot
WOFF2
https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
WOFF
https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff
TFF
https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf

For future updates, just check the lastest version available from here:
https://fonts.googleapis.com/icon?family=Material+Icons

Replace the old version number with the new one.

@sg-mamedova v47 contains meeting_room

You can downvote my comment, but I need to +1.

I finally got to cleaning up my solution and publishing it.

https://github.com/Azumgi/Material-Icons-Complete

It is the project for parsing every single material icon from material.io site and generating fonts for every theme in eot, ttf, otf, svg, woff, and woff2 formats. All the fonts can be downloaded in release section.


@jossef I'm sorry for not responding earlier as I was very busy and then simply forgot about it. Unfortunately, I'm not interested in collaboration due to lack of free time and interest. But you're free to use any parts of my project's code.

Filenames are always the same. Each file has its unique last char + filetype:
"flUhRq6tzZclQEJ-Vdg-IuiaDsN" + [ Y.eot | c.woff2 | a.woff | Z.ttf ]

EOT
https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNY.eot
WOFF2
https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
WOFF
https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff
TFF
https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf

For future updates, just check the lastest version available from here:
https://fonts.googleapis.com/icon?family=Material+Icons

Replace the old version number with the new one.

@sg-mamedova v47 contains meeting_room

Those files .ttf doesn't work properly as fonts in photoshop, anyone knows why or how to make it work?
It actually works when you open the "glyphs" tab on photoshop, but the original font works writing the name os the icon like "add" or "keyboard_arrow_down"

I created a Mode module to download all versions and files of the Font.

```material-regular.ttf
material-regular.eot
material-regular.woff
material-regular.woff2

material-outline.otf
material-outline.eot
material-outline.woff
material-outline.woff2

material-round.otf
material-round.eot
material-round.woff
material-round.woff2

material-sharp.otf
material-sharp.eot
material-sharp.woff
material-sharp.woff2

material-twotone.otf
material-twotone.eot
material-twotone.woff
material-twotone.woff2
```

https://github.com/lotterfriends/material-icons-downloader

The Script also create a version.json file so you know google updated the icons.

Hey @fallXone @ianstormtaylor @petergng @strxetics @BOLL7708 @nyankobu010 @BamiGorengo @xGouley @thw0rted @jimmykane @thw0rted @alecogt @eelcowen @Kerrick @aj1991 @RyanEwen @jamesplease @petergng @ftaiolivista @RyanEwen @fayzaan @alenvuletic @alenvuletic @CodeCrusha @gizm0bill @ericssan

This project is on low maintenance and out of date for a while.

The lack of updates + development support issues also bothered me. I've forked this repo, added support for scss, removed irrelevant files and updated the fonts with the latest straight from Google's CDN.

Check it out: material-design-icons-iconfont

image

good job!
Would you mind push pull request for updating icon fonts? @jossef

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jolenekernick picture jolenekernick  Â·  61Comments

theEmilyRSmith picture theEmilyRSmith  Â·  20Comments

xetrics picture xetrics  Â·  20Comments

prakashsellathurai picture prakashsellathurai  Â·  20Comments

miguel-orange picture miguel-orange  Â·  20Comments