Add Google's Material Icons Extended Icon Font #308

Closed
opened 2 months ago by howyay · 16 comments
howyay commented 2 months ago

Hi, thank you for this absolutely amazing addon,

I recently noticed that many of the Google services I had to use for school were missing icon fonts, even though that the local Material Icons showed as injected in 2.6.1 (no longer does in 2.6.2 because of some of the new changes).

Using the inspector, I found that many services such as Google Calendar, Classroom and Translate were using the Material Icons Extended font instead of the original Material Icons font, so I was hoping that this could be added as a library because sometimes a button has no label and really is confusing to use.

This font is apparently sometimes delivered through fonts.googleapis.com and sometimes fonts.gstatic.com. I have read the Wiki and understand that Google Fonts will never be supported in whole, but I was hoping that this single library could be added like the original Material Icons font was, so users can get better experience on many Google services without having to turn off the Google Fonts block switch as this font was the only thing that's really breaking it.

I also understand that Google's ToS forbids storing Google Charts libraries locally, but I don't know if it applies in this case as well, so I'm most humbly asking you to take this suggestion into consideration.

Thank you

Hi, thank you for this absolutely amazing addon, I recently noticed that many of the Google services I had to use for school were missing icon fonts, even though that the local Material Icons showed as injected in 2.6.1 (no longer does in 2.6.2 because of some of the new changes). Using the inspector, I found that many services such as Google Calendar, Classroom and Translate were using the Material Icons Extended font instead of the original Material Icons font, so I was hoping that this could be added as a library because sometimes a button has no label and really is confusing to use. This font is apparently sometimes delivered through ```fonts.googleapis.com``` and sometimes ```fonts.gstatic.com```. I have read the Wiki and understand that Google Fonts will never be supported in whole, but I was hoping that this single library could be added like the original Material Icons font was, so users can get better experience on many Google services without having to turn off the Google Fonts block switch as this font was the only thing that's really breaking it. I also understand that Google's ToS forbids storing Google Charts libraries locally, but I don't know if it applies in this case as well, so I'm most humbly asking you to take this suggestion into consideration. Thank you
Owner

Thanks for your report 👍

I'll take a closer look. Do you have a website that uses this icons? I only knew the normal icons so far. I can't find any reference to "extended" in the documentation 🤔

https://developers.google.com/fonts/docs/material_icons

Thanks for your report 👍 I'll take a closer look. Do you have a website that uses this icons? I only knew the normal icons so far. I can't find any reference to "extended" in the documentation 🤔 https://developers.google.com/fonts/docs/material_icons
Poster

Wow, I really appreciate the super quick reply!

For public Google sites that use this font, translate.google.com and news.google.com uses this font quite a lot, and should be missing icons for some major components such as the swap language button in Google Translate, as well as almost the entire sidebar in Google News.

Google Translate when LocalCDN 2.6.2 is Enabled and Blocking Google Fonts
Google Translate when LocalCDN 2.6.2 is Enabled and Blocking Google Fonts

Sidebar in Google News when LocalCDN 2.6.2 is Enabled and Blocking Google Fonts
Sidebar in Google News when LocalCDN 2.6.2 is Enabled and Blocking Google Fonts

I would believe that this font is a proprietary extension to the original Materials Icons font and is why it's not been documented, and is used on Google websites only, also the reason I concerned that it might violate the ToS.

The CSS that loads this icon font are structured very similarly to the original one as shown below, it loads the font file from a either fonts.googleapis.com or fonts.gstatic.com, and applies the font and other styling to all nodes with class .material-icons-extended instead of .material-icons for the original

CSS code that loads Material Icons Extended
CSS code that loads Material Icons Extended
EDIT:NOTE:the screenshot shows the loading of Material Icons Extended v87, but the latest version seems to be v91 which is used on a few other Google services such as Google Classroom.
The url to each different version seems largely consistent and static for the file name, so the the following url scheme is valid for MIE v4 to v91 (latest as of 2021/03/13)

https://fonts.gstatic.com/s/materialiconsextended/v{version(a number between 4 and 91)}/kJEjBvgX7BgnkSrUwT8UnLVc38YydejYY-oE_LvJ.woff2

CSS code that loads the original Material Icons from LocalCDN's resource folder
CSS code that loads the original Material Icons

So I imagined the implementation won't be too different from how LocalCDN loads the original Material Icons.

Thank you for your time!

Wow, I really appreciate the super quick reply! For public Google sites that use this font, `translate.google.com` and `news.google.com` uses this font quite a lot, and should be missing icons for some major components such as the swap language button in Google Translate, as well as almost the entire sidebar in Google News. Google Translate when LocalCDN 2.6.2 is Enabled and Blocking Google Fonts ![Google Translate when LocalCDN 2.6.2 is Enabled and Blocking Google Fonts](/attachments/5a0e5337-f1c9-4e5e-83a6-158ae7dfd6df) Sidebar in Google News when LocalCDN 2.6.2 is Enabled and Blocking Google Fonts ![Sidebar in Google News when LocalCDN 2.6.2 is Enabled and Blocking Google Fonts](/attachments/546d7ca9-0225-4177-9cdb-40af75ac6b3f) I would believe that this font is a proprietary extension to the original Materials Icons font and is why it's not been documented, and is used on Google websites only, also the reason I concerned that it might violate the ToS. The CSS that loads this icon font are structured very similarly to the original one as shown below, it loads the font file from a either `fonts.googleapis.com` or `fonts.gstatic.com`, and applies the font and other styling to all nodes with class `.material-icons-extended` instead of `.material-icons` for the original CSS code that loads Material Icons Extended ![CSS code that loads Material Icons Extended](/attachments/f8189b81-2578-4b54-9dd5-1cf8ddccc908) EDIT:NOTE:the screenshot shows the loading of Material Icons Extended v87, but the latest version seems to be v91 which is used on a few other Google services such as Google Classroom. The url to each different version seems largely consistent and static for the file name, so the the following url scheme is valid for MIE v4 to v91 (latest as of 2021/03/13) `https://fonts.gstatic.com/s/materialiconsextended/v{version(a number between 4 and 91)}/kJEjBvgX7BgnkSrUwT8UnLVc38YydejYY-oE_LvJ.woff2` CSS code that loads the original Material Icons from LocalCDN's resource folder ![CSS code that loads the original Material Icons](/attachments/66102692-cf30-47b2-b615-7e76730e5c91) So I imagined the implementation won't be too different from how LocalCDN loads the original Material Icons. Thank you for your time!
Owner

Many thank you for your detailed report. Very good 👍 👍 👍

At the moment there are two problems:

  • License: After a few hours I can't find any reference to these "extended" icons. As long as there are no other websites using these icons, I guess we have to assume that the icons aren't free to use and are exclusive for Google's own services.
  • Technical reason: A direct forwarding of a font apparently doesn't work in Firefox. The browser forbids the redirection (NS_ERROR_DOM_BAD_URI). So we have to use a CSS file like Google Material Icons. The websites news.google.com and translate.google.com don't use a CSS file, they use style-tags inside the head section. This could either be a bug or it's basically not supported. So I created a Firefox issue and marked this here as a firefox-bug.
Many thank you for your detailed report. Very good :+1: :+1: :+1: At the moment there are two problems: * License: After a few hours I can't find any reference to these "extended" icons. As long as there are no other websites using these icons, I guess we have to assume that the icons aren't free to use and are exclusive for Google's own services. * Technical reason: A direct forwarding of a font apparently doesn't work in Firefox. The browser forbids the redirection (`NS_ERROR_DOM_BAD_URI`). So we have to use a CSS file like `Google Material Icons`. The websites `news.google.com` and `translate.google.com` don't use a CSS file, they use style-tags inside the `head` section. This could either be a bug or it's basically not supported. So I created a [Firefox issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1698288) and marked this here as a `firefox-bug`.
nobody added the
firefox-bug
observation
labels 2 months ago
Poster

I understand the potential problem with licensing, and I missed how they actually loaded the MIE font myself, so thank you for your effort to investigating this matter and putting it on Bugzilla!👍

For now, for if anyone has the same problem, a workaround could be using userstyle managers such as Stylus and inject the above CSS that loads the font, except the font source should be local, pointing to the latest version of the MIE font that you will have to download, convert from WOFF2 to TTF, and install on your computer on your own.

I use Stylus for other purposes so I'm fine with using an additional add-on just for this matter, but if anyone has any better ideas on how to achieve the same effect, any suggestion is appreciated.😊

I understand the potential problem with licensing, and I missed how they actually loaded the MIE font myself, so thank you for your effort to investigating this matter and putting it on Bugzilla!👍 For now, for if anyone has the same problem, a workaround could be using userstyle managers such as Stylus and inject the above CSS that loads the font, except the font source should be local, pointing to the latest version of the MIE font that you will have to download, convert from WOFF2 to TTF, and install on your computer on your own. I use Stylus for other purposes so I'm fine with using an additional add-on just for this matter, but if anyone has any better ideas on how to achieve the same effect, any suggestion is appreciated.😊
Owner

You're welcome 🙂

Although I'll close here, but I'll keep observing the topic through the label "observation".

If you know of a website that uses these icons, feel free to reopen the issue.

You're welcome :slightly_smiling_face: Although I'll close here, but I'll keep observing the topic through the label "observation". If you know of a website that uses these icons, feel free to reopen the issue.
nobody closed this issue 2 months ago
Owner
The linked issue was a duplicate of [Extensions redirecting same-origin requests are blocked by CORS checks (1694679)](https://bugzilla.mozilla.org/show_bug.cgi?id=1694679)

I'm not quite sure how relevant this is, but I cannot even force news.google.com to fail to load the icons: image

image

I'm not quite sure how relevant this is, but I cannot even force `news.google.com` to fail to load the icons: ![image](/attachments/75b91bbf-21e2-4252-81de-5ec3783bd1c4) ![image](/attachments/66a7100d-e9ad-44c9-998c-662df446497a)
278 KiB
389 KiB
Owner

They are probably still in your cache 😉

They are probably still in your cache 😉

They are probably still in your cache 😉

Unless the developer tools can't properly disable the cache, that doesn't seem to be the case (the only things that are blocked are the ones blocked by uBlock Origin): image

> They are probably still in your cache 😉 Unless the developer tools can't properly disable the cache, that doesn't seem to be the case (the only things that are blocked are the ones blocked by uBlock Origin): ![image](/attachments/f1e60289-dd71-4810-9df8-b728abab5a72)
422 KiB
Owner

Hmm okay. Could you check that with the latest developer version of LocalCDN and the stable Firefox release?

https://codeberg.org/nobody/LocalCDN/wiki#user-content-5-you-recently-changed-something-in-the-code-and-i-would-like-to-test-it-how-can-i-do-that

Hmm okay. Could you check that with the latest developer version of LocalCDN and the stable Firefox release? https://codeberg.org/nobody/LocalCDN/wiki#user-content-5-you-recently-changed-something-in-the-code-and-i-would-like-to-test-it-how-can-i-do-that

I'll try it with a fresh profile before trying it with a stable version, since an older version requires that I use a profile that is not from a newer version anyways (I do have MOZ_DOWNGRADE=1 set, but I don't want to risk my profile potentially breaking if I'm not moving off of Nightly or something like that). I'll do that during the weekend.

I'll try it with a fresh profile before trying it with a stable version, since an older version requires that I use a profile that is not from a newer version anyways (I do have `MOZ_DOWNGRADE=1` set, but I don't want to risk my profile potentially breaking if I'm not moving off of Nightly or something like that). I'll do that during the weekend.
Owner

You can simply copy the whole profile folder (/home/USER/.mozilla/firefox/PROFILE_FOLDER) before switching to the stable Firefox version.


I tested this again:

  • The icons are loaded if this is allowed in LocalCDN.
  • The icons are not loaded if this is not allowed in LocalCDN.
  • When switching (allowed -> forbidden), the icons are loaded from the cache.
  • If the cache is deactivated, the icons are also not loaded anymore.
You can simply copy the whole profile folder (`/home/USER/.mozilla/firefox/PROFILE_FOLDER`) before switching to the stable Firefox version. --- I tested this again: * The icons are loaded if this is allowed in LocalCDN. * The icons are not loaded if this is not allowed in LocalCDN. * When switching (allowed -> forbidden), the icons are loaded from the cache. * If the cache is deactivated, the icons are also not loaded anymore.

After the long wait for version 2.6.6, I've noticed that the Material Icons for Google services like Translate or the Play Store are back (as seen in the screenshot). Seems like (at least some of) the missing ones have been included in Material Icons v85?

In the meantime, I've contacted a Google employee with commit history in the Material Icons repo, he told me that he doesn't work on that project anymore, but assumes that undocumented icons are not subject of the Apache 2.0 license.

After the long wait for version 2.6.6, I've noticed that the Material Icons for Google services like Translate or the Play Store are back (as seen in the screenshot). Seems like (at least some of) the missing ones have been included in Material Icons v85? In the meantime, I've contacted a Google employee with commit history in the Material Icons repo, he told me that he doesn't work on that project anymore, but assumes that undocumented icons are not subject of the Apache 2.0 license.
Owner

After the long wait for version 2.6.6

Yes, Mozilla has taken a lot of time this time. 😞

I've noticed that the Material Icons for Google services like Translate or the Play Store are back (as seen in the screenshot). Seems like (at least some of) the missing ones have been included in Material Icons v85?

Interesting. Yes, it is possible that icons move from "Extended" to "Normal".

In the meantime, I've contacted a Google employee with commit history in the Material Icons repo, he told me that he doesn't work on that project anymore, but assumes that undocumented icons are not subject of the Apache 2.0 license.

Hmm, okay. On the other hand, the same ToS should apply to these icons:

https://developers.google.com/fonts/terms:

By using this API, you consent to be bound by the Google APIs Terms of Service ("API ToS") at https://developers.google.com/terms.

> After the long wait for version 2.6.6 Yes, Mozilla has taken a lot of time this time. :disappointed: > I've noticed that the Material Icons for Google services like Translate or the Play Store are back (as seen in the screenshot). Seems like (at least some of) the missing ones have been included in Material Icons v85? Interesting. Yes, it is possible that icons move from "Extended" to "Normal". > In the meantime, I've contacted a Google employee with commit history in the Material Icons repo, he told me that he doesn't work on that project anymore, but assumes that undocumented icons are not subject of the Apache 2.0 license. Hmm, okay. On the other hand, the same ToS should apply to these icons: https://developers.google.com/fonts/terms: > By using this API, you consent to be bound by the Google APIs Terms of Service ("API ToS") at https://developers.google.com/terms.

In the meantime, I've contacted a Google employee with commit history in the Material Icons repo, he told me that he doesn't work on that project anymore, but assumes that undocumented icons are not subject of the Apache 2.0 license.

Hmm, okay. On the other hand, the same ToS should apply to these icons:

https://developers.google.com/fonts/terms:

By using this API, you consent to be bound by the Google APIs Terms of Service ("API ToS") at https://developers.google.com/terms.

I've looked through the ToS, these are very "blanket statement"-y formulated and not very elaborate, since they're meant for all Google APIs, not just the fonts and icons. The total lack of documentation / acknowledgement / linkage to a Open Source license for the Extended icon collection seems to me to be the biggest dealbreaker concerning the usage for our purposes, it says about OP licenses:

Some of the software required by or included in our APIs may be offered under an open source license. Open source software licenses constitute separate written agreements. For certain APIs, open source software is listed in the documentation. To the limited extent the open source software license expressly supersedes the Terms, the open source license instead sets forth your agreement with Google for the applicable open source software.

And:

You will only access (or attempt to access) an API by the means described in the documentation of that API.

The need for inclusion now seems to be more or less obsolete anyway, since most needed icons have been ported to the public Icon set.

> > In the meantime, I've contacted a Google employee with commit history in the Material Icons repo, he told me that he doesn't work on that project anymore, but assumes that undocumented icons are not subject of the Apache 2.0 license. > > Hmm, okay. On the other hand, the same ToS should apply to these icons: > > https://developers.google.com/fonts/terms: > > > By using this API, you consent to be bound by the Google APIs Terms of Service ("API ToS") at https://developers.google.com/terms. > I've looked through the ToS, these are very "blanket statement"-y formulated and not very elaborate, since they're meant for all Google APIs, not just the fonts and icons. The total lack of documentation / acknowledgement / linkage to a Open Source license for the Extended icon collection seems to me to be the biggest dealbreaker concerning the usage for our purposes, it says about OP licenses: >Some of the software required by or included in our APIs may be offered under an open source license. Open source software licenses constitute separate written agreements. For certain APIs, open source software is listed in the documentation. To the limited extent the open source software license expressly supersedes the Terms, the open source license instead sets forth your agreement with Google for the applicable open source software. And: >You will only access (or attempt to access) an API by the means described in the documentation of that API. The need for inclusion now seems to be more or less obsolete anyway, since most needed icons have been ported to the public Icon set.
Owner

Thanks for looking into this 👍

I think one day there will be icons again that are only in one set 🤔

Thanks for looking into this 👍 I think one day there will be icons again that are only in one set :thinking:
Sign in to join this conversation.
No Milestone
No Assignees
4 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.