Fix Material Icons by migrating to Material Symbols. #1404
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Something appears to have changed about the Material Icons icon font that we're loading from Google Fonts, which is making them render strangely. Most severely is that on iOS, the width of the element containing the icons is 1,000,000 pixels wide, which not only stretches the page but also blocks click events from going through, even though the element itself is transparent. On desktop and Android, we do not see the extremely wide icons, but it appears that the icons are noticeably smaller than they used to be. Several years ago, Google released Material Symbols as a successor to Material Icons. Switching our app to Material Symbols appears to get rid of the issues described above. Note that there are slight differences in the icons after this change. Most of the differences are due to icons changing from being outlined (no fill) to filled with a solid color. Material Icons had separate icon names for any icons with different fill vs. outlined variants, but Material Symbols controls this with the font URL query and the `font-variant-settings` CSS property. This means that when migrating from Material Icons, any icons with names like `foo_outline` must be renamed to `foo`. We don't bother with loading both the outlined and filled variations of the font, so we've instead migrated several icons to the filled variant.
richardxia
requested review from
jjfreund,
schroerbrian,
lgarofalo and
katerina-kossler
lgarofalo
approved these changes
Jan 9, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Something appears to have changed about the Material Icons icon font that we're loading from Google Fonts, which is making them render strangely. Most severely is that on iOS, the width of the element containing the icons is 1,000,000 pixels wide, which not only stretches the page but also blocks click events from going through, even though the element itself is transparent. On desktop and Android, we do not see the extremely wide icons, but it appears that the icons are noticeably smaller than they used to be.
Several years ago, Google released Material Symbols as a successor to Material Icons. Switching our app to Material Symbols appears to get rid of the issues described above.
Note that there are slight differences in the icons after this change. Most of the differences are due to icons changing from being outlined (no fill) to filled with a solid color. Material Icons had separate icon names for any icons with different fill vs. outlined variants, but Material Symbols controls this with the font URL query and the
font-variant-settingsCSS property. This means that when migrating from Material Icons, any icons with names likefoo_outlinemust be renamed tofoo. We don't bother with loading both the outlined and filled variations of the font, so we've instead migrated several icons to the filled variant.I tested this on desktop as well as an iOS simulator (I own a Macbook but not an iPhone, so I have to use a simulator), and I can confirm that on iOS, we don't experience the bug where various links don't work (due to be covered up by the insanely wide elements). On Desktop, on Chrome, I made sure to visit every single instance of a Material Icon/Symbol on our app to make sure they all render fine. I also tested a bit on Firefox and Safari, though not comprehensively.
Finally, here are a few screenshots demonstrating the before and after on desktop Chrome:
Before (Edit Phone)
After (Edit Phone)
Before (Add Service)
After (Add Service)
Before (News Banner)
After (News Banner)
Before (Map Directions)
After (Map Directions)
Before (Add Bookmark)
After (Add Bookmark)