From e6eb003d52e12d21129e18e8b673492765985061 Mon Sep 17 00:00:00 2001 From: Richard Xia Date: Wed, 8 Jan 2025 19:42:36 -0800 Subject: [PATCH] Fix Material Icons by migrating to Material Symbols. (#1404) 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. --- app/components/edit/EditCollection.tsx | 2 +- app/components/edit/EditNote.tsx | 2 +- app/components/edit/EditNotes.tsx | 2 +- app/components/edit/EditScheduleDay.tsx | 4 ++-- app/components/edit/EditServices.tsx | 2 +- app/components/edit/EditSidebar.tsx | 2 +- app/components/listing/MapOfLocations.tsx | 2 +- app/components/listing/ServiceDetails.tsx | 4 ++-- app/components/search/SearchMap/SearchEntry.tsx | 2 +- .../ui/BookmarkModal/BookmarkModal.module.scss | 2 +- app/components/ui/BookmarkModal/BookmarkModal.tsx | 12 ++++++++---- app/components/ui/BookmarksMenu/BookmarksMenu.tsx | 6 +++--- app/components/ui/NewsArticles/NewsArticles.tsx | 14 ++++++++++---- .../NavigatorDashboard/NavigatorDashboard.tsx | 6 ++++-- .../ServiceDiscoveryForm/ServiceDiscoveryForm.tsx | 2 +- app/styles/utils/_helpers.scss | 9 ++++++--- 16 files changed, 44 insertions(+), 29 deletions(-) diff --git a/app/components/edit/EditCollection.tsx b/app/components/edit/EditCollection.tsx index 3bf2d76bc..85c685fc1 100644 --- a/app/components/edit/EditCollection.tsx +++ b/app/components/edit/EditCollection.tsx @@ -131,7 +131,7 @@ export default function editCollectionHOC( className="trash-button icon-button" onClick={() => this.removeItem(index, item)} > - + )); diff --git a/app/components/edit/EditNote.tsx b/app/components/edit/EditNote.tsx index 6fd5d6847..8fab6ba4e 100644 --- a/app/components/edit/EditNote.tsx +++ b/app/components/edit/EditNote.tsx @@ -65,7 +65,7 @@ class EditNote extends Component { className="delete-note" onClick={() => removeNote(index)} > - + ); diff --git a/app/components/edit/EditNotes.tsx b/app/components/edit/EditNotes.tsx index 527e867d8..9ed95187e 100644 --- a/app/components/edit/EditNotes.tsx +++ b/app/components/edit/EditNotes.tsx @@ -96,7 +96,7 @@ const EditNotes = ({ notes = [], handleNotesChange }: Props) => { className="edit--section--list--item--button" onClick={addNote} > - add_box Add Note + add_box Add Note ); diff --git a/app/components/edit/EditScheduleDay.tsx b/app/components/edit/EditScheduleDay.tsx index 3f4113ad5..c74413971 100644 --- a/app/components/edit/EditScheduleDay.tsx +++ b/app/components/edit/EditScheduleDay.tsx @@ -84,7 +84,7 @@ const TimeInputRow = ({ onClick={() => removeTime()} className="remove-time icon-button" > - delete + delete )} @@ -200,7 +200,7 @@ class EditScheduleDay extends Component { className="icon-button" onClick={this.addTime} > - add + add )} diff --git a/app/components/edit/EditServices.tsx b/app/components/edit/EditServices.tsx index f974f718c..1c30ab679 100644 --- a/app/components/edit/EditServices.tsx +++ b/app/components/edit/EditServices.tsx @@ -44,7 +44,7 @@ const EditServices = ({ id="new-service-button" onClick={addService} > - add_box + add_box Add New Service diff --git a/app/components/edit/EditSidebar.tsx b/app/components/edit/EditSidebar.tsx index 3958f40e3..443f01053 100644 --- a/app/components/edit/EditSidebar.tsx +++ b/app/components/edit/EditSidebar.tsx @@ -152,7 +152,7 @@ const EditSidebar = ({ onClick={addService} disabled={newResource} > - add_circle_outline + add_circle {newResource && ( diff --git a/app/components/listing/MapOfLocations.tsx b/app/components/listing/MapOfLocations.tsx index 9cb78fa05..9c999e96e 100644 --- a/app/components/listing/MapOfLocations.tsx +++ b/app/components/listing/MapOfLocations.tsx @@ -64,7 +64,7 @@ export const MapOfLocations = ({
- + keyboard_arrow_down
diff --git a/app/components/listing/ServiceDetails.tsx b/app/components/listing/ServiceDetails.tsx index 01dcd3721..cb3e5dd78 100644 --- a/app/components/listing/ServiceDetails.tsx +++ b/app/components/listing/ServiceDetails.tsx @@ -38,7 +38,7 @@ export const ServiceDetails = ({ service }: { service: Service }) => { {infoHidden && ( More Info - keyboard_arrow_down + keyboard_arrow_down )} @@ -72,7 +72,7 @@ export const ServiceDetails = ({ service }: { service: Service }) => { > Less Info - keyboard_arrow_up + keyboard_arrow_up diff --git a/app/components/search/SearchMap/SearchEntry.tsx b/app/components/search/SearchMap/SearchEntry.tsx index 77f2bb67d..94dfe00ef 100644 --- a/app/components/search/SearchMap/SearchEntry.tsx +++ b/app/components/search/SearchMap/SearchEntry.tsx @@ -88,7 +88,7 @@ export default class SearchEntry extends Component { target="_blank" rel="noopener noreferrer" > - directions_outlined + directions Go diff --git a/app/components/ui/BookmarkModal/BookmarkModal.module.scss b/app/components/ui/BookmarkModal/BookmarkModal.module.scss index e03fad508..1dddab34f 100644 --- a/app/components/ui/BookmarkModal/BookmarkModal.module.scss +++ b/app/components/ui/BookmarkModal/BookmarkModal.module.scss @@ -43,7 +43,7 @@ column-gap: 20px; padding: 15px; .bookmarkIcon { - // Nested style to override default material-icons styles + // Nested style to override default material-symbols-outlined styles grid-area: icon; width: 60px; height: auto; diff --git a/app/components/ui/BookmarkModal/BookmarkModal.tsx b/app/components/ui/BookmarkModal/BookmarkModal.tsx index 321aa7648..89309b6e3 100644 --- a/app/components/ui/BookmarkModal/BookmarkModal.tsx +++ b/app/components/ui/BookmarkModal/BookmarkModal.tsx @@ -157,7 +157,9 @@ export const BookmarkModal = ({
- star + + star +
- + cancel @@ -201,7 +203,7 @@ export const BookmarkModal = ({ {selectedFolder?.name ?? "Select Folder"} - arrow_drop_down + arrow_drop_down

{expandFolders && (
    @@ -216,7 +218,9 @@ export const BookmarkModal = ({ setExpandFolders(false); }} > - + folder {folder.name} diff --git a/app/components/ui/BookmarksMenu/BookmarksMenu.tsx b/app/components/ui/BookmarksMenu/BookmarksMenu.tsx index 35dfedb1a..95250ecb2 100644 --- a/app/components/ui/BookmarksMenu/BookmarksMenu.tsx +++ b/app/components/ui/BookmarksMenu/BookmarksMenu.tsx @@ -134,7 +134,7 @@ const BookmarksInnerMenu = ({ {activeFolder === null ? ( "" ) : ( - arrow_left + arrow_left )} {activeFolder === null ? "All Folders" @@ -160,7 +160,7 @@ const BookmarksInnerMenu = ({ const FolderItem = ({ folder }: { folder: Folder }) => ( <>
    - folder + folder

    {folder.bookmarks.length}

    {folder.name}

    @@ -191,7 +191,7 @@ const FoldersList = ({ const BookmarkItem = ({ name }: { name: string }) => ( <>
    - star + star

    {name}

    diff --git a/app/components/ui/NewsArticles/NewsArticles.tsx b/app/components/ui/NewsArticles/NewsArticles.tsx index 09c7955f8..c0e90e2a6 100644 --- a/app/components/ui/NewsArticles/NewsArticles.tsx +++ b/app/components/ui/NewsArticles/NewsArticles.tsx @@ -47,7 +47,9 @@ const ArticleItem = ({ article }: { article: NewsArticle }) => ( Read more → More{" "} - + keyboard_arrow_right @@ -90,7 +92,7 @@ export const NewsArticles = () => { onClick={() => setCollapseCarousel(!collapseCarousel)} > { - + keyboard_arrow_left - + keyboard_arrow_right diff --git a/app/pages/NavigatorDashboard/NavigatorDashboard.tsx b/app/pages/NavigatorDashboard/NavigatorDashboard.tsx index f99e9337e..465fd552f 100644 --- a/app/pages/NavigatorDashboard/NavigatorDashboard.tsx +++ b/app/pages/NavigatorDashboard/NavigatorDashboard.tsx @@ -245,7 +245,9 @@ const SavedSearchCard = ({ savedSearch }: { savedSearch: SavedSearch }) => { Saved Search Icon

    Results for "{savedSearch.name}"

    @@ -284,7 +286,7 @@ const BookmarkFolderCard = ({ return (
    - folder + folder

    {folder.name}

    {dateString ? ( diff --git a/app/pages/ServiceDiscoveryForm/ServiceDiscoveryForm.tsx b/app/pages/ServiceDiscoveryForm/ServiceDiscoveryForm.tsx index a57327d13..8cfaeabe3 100644 --- a/app/pages/ServiceDiscoveryForm/ServiceDiscoveryForm.tsx +++ b/app/pages/ServiceDiscoveryForm/ServiceDiscoveryForm.tsx @@ -290,7 +290,7 @@ const Header = ({ onGoBack }: { onGoBack: () => void }) => ( onClick={onGoBack} tabIndex={0} > - keyboard_arrow_left + keyboard_arrow_left All resource guides
    diff --git a/app/styles/utils/_helpers.scss b/app/styles/utils/_helpers.scss index 54eec6e8f..ed0018d47 100644 --- a/app/styles/utils/_helpers.scss +++ b/app/styles/utils/_helpers.scss @@ -50,7 +50,7 @@ table { //////////////////////////////////////////////////////////////////////////////////////// // TYPEFACES -@import url(https://fonts.googleapis.com/icon?family=Material+Icons); +@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200); @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700&display=swap"); $font-family-base: "Open Sans", "Helvetica Neue", "Arial", sans-serif; @@ -176,13 +176,16 @@ p.message { } //////////////////////////////////////////////////////////////////////////////////////// -// MATERIAL ICONS +// MATERIAL SYMBOLS -.material-icons { +.material-symbols-outlined { vertical-align: middle; position: relative; top: -2px; + // Special CSS property for configuring Material Symbols + font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; + &.blue { color: $color-brand; }