google / material-design-icons

Material Design icons by Google (Material Symbols)
http://google.github.io/material-design-icons/
Apache License 2.0
49.97k stars 9.65k forks source link

Outdated Font Files #786

Open conner-fallone opened 6 years ago

conner-fallone commented 6 years ago

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

ianstormtaylor commented 6 years ago

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!

petergng commented 6 years ago

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

strxetics commented 5 years ago

is there also a codepoint list?

BOLL7708 commented 5 years ago

@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 commented 5 years ago

Ran into this issue today as well, here's the list of fonts for v38 from Google Fonts, just enter them into a browser to download them. Font files are the latest as of 6/13/2018 EOT https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNY.eot WOFF2 https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 WOFF https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff TFF https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf

SvenBudak commented 5 years ago

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

nyankobu010 commented 5 years ago

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');
}
xGouley commented 5 years ago

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

thw0rted commented 5 years ago

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.

jimmykane commented 5 years ago

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

thw0rted commented 5 years ago

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.

alecogt commented 5 years ago

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

eelcowen commented 5 years ago

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?

Kerrick commented 5 years ago

Icon person_add_disabled is missing too.

ichintan commented 5 years ago

One solution to use

https://storage.googleapis.com/non-spec-apps/mio-icons/latest/baseline.css

thw0rted commented 5 years ago

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....

alexanderjakob commented 5 years ago

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

RyanEwen commented 5 years ago

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!

jamesplease commented 5 years ago

: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:

thw0rted commented 5 years ago

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.

petergng commented 5 years ago

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.

ftaiolivista commented 5 years ago

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

RyanEwen commented 5 years ago

@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.

ftaiolivista commented 5 years ago

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

fayzaan commented 5 years ago

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

alenvuletic commented 5 years ago

+1

Develobba commented 5 years ago

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. :)

gizm0bill commented 5 years ago

alternate_email also missing

vdvukhzhilov commented 5 years ago

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!

jossef commented 5 years ago

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

petergng commented 5 years ago

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

hegelstad commented 5 years ago

As of Nov. 8 2018:

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

wachunga commented 5 years ago

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

emmanuelvlad commented 5 years ago

How is this still an issue ... :/

SvenBudak commented 5 years ago

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

jossef commented 5 years ago

@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

DomHudson commented 5 years ago

@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

jossef commented 5 years ago

@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

dieggsy commented 5 years ago

@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 commented 5 years ago

@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

Dreomite commented 5 years ago

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.

jossef commented 5 years ago

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!

tsiegleauq commented 5 years ago

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

jossef commented 5 years ago

@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!

cfremgen commented 5 years ago

Numbered battery icons are still missing.

sg-mamedova commented 5 years ago

meeting_room also missing

TZanke commented 5 years ago

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/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNY.eot WOFF2 https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 WOFF https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff TFF https://fonts.gstatic.com/s/materialicons/v139/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

sgon00 commented 5 years ago

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

Dreomite commented 5 years ago

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.

lipedeitos commented 5 years ago

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"