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.
ShelterTechSF · Jan 9, 2025 · e6eb003 · e6eb003
1 parent f50e771
commit e6eb003
Show file tree

Hide file tree

Showing 16 changed files with 44 additions and 29 deletions.
diff --git a/app/components/edit/EditCollection.tsx b/app/components/edit/EditCollection.tsx
@@ -131,7 +131,7 @@ export default function editCollectionHOC<T extends BaseItem>(
               className="trash-button icon-button"
               onClick={() => this.removeItem(index, item)}
             >
-              <i className="material-icons">&#xE872;</i>
+              <i className="material-symbols-outlined">&#xE872;</i>
             </button>
           </div>
         ));

diff --git a/app/components/edit/EditNote.tsx b/app/components/edit/EditNote.tsx
@@ -65,7 +65,7 @@ class EditNote extends Component<Props, State> {
             className="delete-note"
             onClick={() => removeNote(index)}
           >
-            <i className="material-icons">&#xE872;</i>
+            <i className="material-symbols-outlined">&#xE872;</i>
           </button>
         </li>
       );

diff --git 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}
       >
-        <i className="material-icons">add_box</i> Add Note
+        <i className="material-symbols-outlined">add_box</i> Add Note
       </button>
     </li>
   );

diff --git 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"
             >
-              <i className="material-icons">delete</i>
+              <i className="material-symbols-outlined">delete</i>
             </button>
           )}
         </div>
@@ -200,7 +200,7 @@ class EditScheduleDay extends Component<EditScheduleDayProps> {
               className="icon-button"
               onClick={this.addTime}
             >
-              <i className="material-icons">add</i>
+              <i className="material-symbols-outlined">add</i>
             </button>
           )}
         </div>

diff --git a/app/components/edit/EditServices.tsx b/app/components/edit/EditServices.tsx
@@ -44,7 +44,7 @@ const EditServices = ({
       id="new-service-button"
       onClick={addService}
     >
-      <i className="material-icons">add_box</i>
+      <i className="material-symbols-outlined">add_box</i>
       Add New Service
     </button>
   </li>

diff --git a/app/components/edit/EditSidebar.tsx b/app/components/edit/EditSidebar.tsx
@@ -152,7 +152,7 @@ const EditSidebar = ({
             onClick={addService}
             disabled={newResource}
           >
-            <i className="material-icons">add_circle_outline</i>
+            <i className="material-symbols-outlined">add_circle</i>
           </button>
         </h3>
         {newResource && (

diff --git a/app/components/listing/MapOfLocations.tsx b/app/components/listing/MapOfLocations.tsx
@@ -64,7 +64,7 @@ export const MapOfLocations = ({
                         </td>
                         <td className="iconcell">
                           <div className="selector">
-                            <i className="material-icons">
+                            <i className="material-symbols-outlined">
                               keyboard_arrow_down
                             </i>
                           </div>

diff --git a/app/components/listing/ServiceDetails.tsx b/app/components/listing/ServiceDetails.tsx
@@ -38,7 +38,7 @@ export const ServiceDetails = ({ service }: { service: Service }) => {
         {infoHidden && (
           <span>
             More Info
-            <i className="material-icons">keyboard_arrow_down</i>
+            <i className="material-symbols-outlined">keyboard_arrow_down</i>
           </span>
         )}
       </div>
@@ -72,7 +72,7 @@ export const ServiceDetails = ({ service }: { service: Service }) => {
           >
             <span>
               Less Info
-              <i className="material-icons">keyboard_arrow_up</i>
+              <i className="material-symbols-outlined">keyboard_arrow_up</i>
             </span>
           </div>
         </div>

diff --git a/app/components/search/SearchMap/SearchEntry.tsx b/app/components/search/SearchMap/SearchEntry.tsx
@@ -88,7 +88,7 @@ export default class SearchEntry extends Component<Props> {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <i className="material-icons">directions_outlined</i>
+                  <i className="material-symbols-outlined">directions</i>
                   Go
                 </a>
               </li>

diff --git 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
@@ -157,7 +157,9 @@ export const BookmarkModal = ({
       <div className={styles.modalContent}>
         <div>
           <div className={styles.bookmarkDescription}>
-            <i className={`material-icons ${styles.bookmarkIcon}`}>star</i>
+            <i className={`material-symbols-outlined ${styles.bookmarkIcon}`}>
+              star
+            </i>
             <div className={styles.bookmarkNameContainer}>
               <input
                 value={bookmarkName}
@@ -173,7 +175,7 @@ export const BookmarkModal = ({
                 type="button"
                 className={styles.clearBookmarkButton}
               >
-                <i className={`material-icons ${styles.clearBookmarkText}`}>
+                <i className={`material-symbols-outlined ${styles.clearBookmarkText}`}>
                   cancel
                 </i>
               </button>
@@ -201,7 +203,7 @@ export const BookmarkModal = ({
               <span className={selectedFolder?.name ? "" : styles.placeholder}>
                 {selectedFolder?.name ?? "Select Folder"}
               </span>
-              <i className="material-icons">arrow_drop_down</i>
+              <i className="material-symbols-outlined">arrow_drop_down</i>
             </p>
             {expandFolders && (
               <ul className={styles.bookmarkFoldersList}>
@@ -216,7 +218,9 @@ export const BookmarkModal = ({
                         setExpandFolders(false);
                       }}
                     >
-                      <i className={`material-icons ${styles.folderIcon}`}>
+                      <i
+                        className={`material-symbols-outlined ${styles.folderIcon}`}
+                      >
                         folder
                       </i>
                       {folder.name}

diff --git a/app/components/ui/BookmarksMenu/BookmarksMenu.tsx b/app/components/ui/BookmarksMenu/BookmarksMenu.tsx
@@ -134,7 +134,7 @@ const BookmarksInnerMenu = ({
         {activeFolder === null ? (
           ""
         ) : (
-          <i className="material-icons">arrow_left</i>
+          <i className="material-symbols-outlined">arrow_left</i>
         )}
         {activeFolder === null
           ? "All Folders"
@@ -160,7 +160,7 @@ const BookmarksInnerMenu = ({
 const FolderItem = ({ folder }: { folder: Folder }) => (
   <>
     <div className={styles.itemIconBox}>
-      <i className={`material-icons ${styles.folderIcon}`}>folder</i>
+      <i className={`material-symbols-outlined ${styles.folderIcon}`}>folder</i>
       <p className={styles.folderCount}>{folder.bookmarks.length}</p>
     </div>
     <p className={styles.folderName}>{folder.name}</p>
@@ -191,7 +191,7 @@ const FoldersList = ({
 const BookmarkItem = ({ name }: { name: string }) => (
   <>
     <div className={`${styles.itemIconBox} ${styles.bookmarkIconBox}`}>
-      <i className={`material-icons ${styles.bookmarkIcon}`}>star</i>
+      <i className={`material-symbols-outlined ${styles.bookmarkIcon}`}>star</i>
     </div>
     <p className={styles.folderName}>{name}</p>
   </>

diff --git a/app/components/ui/NewsArticles/NewsArticles.tsx b/app/components/ui/NewsArticles/NewsArticles.tsx
@@ -47,7 +47,9 @@ const ArticleItem = ({ article }: { article: NewsArticle }) => (
         <span className={styles.linkText}>Read more →</span>
         <span className={styles.linkText_mobile}>
           More{" "}
-          <i className={`material-icons ${styles.mobileLinkChevron}`}>
+          <i
+            className={`material-symbols-outlined ${styles.mobileLinkChevron}`}
+          >
             keyboard_arrow_right
           </i>
         </span>
@@ -90,7 +92,7 @@ export const NewsArticles = () => {
           onClick={() => setCollapseCarousel(!collapseCarousel)}
         >
           <i
-            className={`material-icons ${
+            className={`material-symbols-outlined ${
               collapseCarousel
                 ? styles.expandCarouselChev
                 : styles.collapseCarouselChev
@@ -127,14 +129,18 @@ export const NewsArticles = () => {
             <ButtonBack
               className={`${styles.carouselButton} ${styles.carouselButton_prev}`}
             >
-              <i className={`material-icons ${styles.chevronControls}`}>
+              <i
+                className={`material-symbols-outlined ${styles.chevronControls}`}
+              >
                 keyboard_arrow_left
               </i>
             </ButtonBack>
             <ButtonNext
               className={`${styles.carouselButton}  ${styles.chevronControls} ${styles.carouselButton_next}`}
             >
-              <i className={`material-icons ${styles.chevronControls}`}>
+              <i
+                className={`material-symbols-outlined ${styles.chevronControls}`}
+              >
                 keyboard_arrow_right
               </i>
             </ButtonNext>

diff --git a/app/pages/NavigatorDashboard/NavigatorDashboard.tsx b/app/pages/NavigatorDashboard/NavigatorDashboard.tsx
@@ -245,7 +245,9 @@ const SavedSearchCard = ({ savedSearch }: { savedSearch: SavedSearch }) => {
       <img src={SearchIcon} alt="Saved Search Icon" />
       <p>Results for &quot;{savedSearch.name}&quot;</p>
       <button type="button" className={styles.savedSearchEditButton}>
-        <span className={`material-icons ${styles.savedSearchEditIcon}`}>
+        <span
+          className={`material-symbols-outlined ${styles.savedSearchEditIcon}`}
+        >
           minimize
         </span>
       </button>
@@ -284,7 +286,7 @@ const BookmarkFolderCard = ({
 
   return (
     <div className={styles.cardItem}>
-      <i className="material-icons">folder</i>
+      <i className="material-symbols-outlined">folder</i>
       <p>{folder.name}</p>
       <div className={styles.bookmarkUpdated}>
         {dateString ? (

diff --git 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}
     >
-      <i className="material-icons">keyboard_arrow_left</i>
+      <i className="material-symbols-outlined">keyboard_arrow_left</i>
       All resource guides
     </div>
   </div>

diff --git 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;
   }