google · rfontanarosa · Mar 24, 2026 · Mar 23, 2026 · Mar 23, 2026
diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts
@@ -19,6 +19,7 @@ import {
   withInterceptorsFromDi,
 } from '@angular/common/http';
 import { NgModule } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
 import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { getAuth, provideAuth } from '@angular/fire/auth';
 import {
@@ -94,4 +95,8 @@ import { environment } from 'environments/environment';
     provideHttpClient(withInterceptorsFromDi()),
   ],
 })
-export class AppModule {}
+export class AppModule {
+  constructor(iconRegistry: MatIconRegistry) {
+    iconRegistry.setDefaultFontSetClass('material-symbols-outlined');
+  }
+}
diff --git a/web/src/app/components/edit-survey/edit-survey.component.html b/web/src/app/components/edit-survey/edit-survey.component.html
@@ -39,7 +39,7 @@
         [routerLink]="['./survey']"
         [routerLinkActive]="['is-active']"
       >
-        <mat-icon class="material-symbols-outlined button-icon" matListItemIcon>
+        <mat-icon class="button-icon" matListItemIcon>
           quick_reference_all
         </mat-icon>
         <span matListItemTitle i18n="@@app.editSurvey.surveyDetails.title"
@@ -53,7 +53,7 @@
         [routerLink]="['./share']"
         [routerLinkActive]="['is-active']"
       >
-        <mat-icon class="material-symbols-outlined button-icon" matListItemIcon>
+        <mat-icon class="button-icon" matListItemIcon>
           group
         </mat-icon>
         <span matListItemTitle i18n="@@app.editSurvey.sharing.title"
@@ -68,7 +68,7 @@
         [routerLink]="['./json']"
         [routerLinkActive]="['is-active']"
       >
-        <mat-icon class="material-symbols-outlined button-icon" matListItemIcon>
+        <mat-icon class="button-icon" matListItemIcon>
           code
         </mat-icon>
         <span matListItemTitle>JSON</span>
@@ -77,7 +77,7 @@
       <div class="job-label-and-add-button">
         <h3 matSubheader class="job-label" i18n="@@app.labels.jobs">Jobs</h3>
         <button mat-icon-button id="add-button" (click)="addJob()">
-          <mat-icon class="material-symbols-outlined">add</mat-icon>
+          <mat-icon>add</mat-icon>
         </button>
       </div>
 

diff --git a/...nts/main-page-container/main-page/secondary-side-panel/loi-panel/loi-panel.component.html b/...nts/main-page-container/main-page/secondary-side-panel/loi-panel/loi-panel.component.html
@@ -35,7 +35,7 @@
         aria-label="properties"
         (click)="openPropertiesDialog($event)"
       >
-        <mat-icon class="material-symbols-outlined show-properties-icon">
+        <mat-icon class="show-properties-icon">
           data_info_alert
         </mat-icon>
       </button>
@@ -59,7 +59,7 @@
           <mat-divider *ngIf="i > 0"></mat-divider>
           <div class="submission-item">
             <mat-list-item (click)="onSelectSubmission(submission.id)">
-              <mat-icon matListItemIcon class="material-symbols-outlined"
+              <mat-icon matListItemIcon
                 >text_snippet</mat-icon
               >
               <h3 matListItemTitle>

diff --git a/web/src/app/components/shared/copy-survey-controls/copy-survey-controls.component.html b/web/src/app/components/shared/copy-survey-controls/copy-survey-controls.component.html
@@ -16,13 +16,13 @@
 
 <div class="share-buttons">
   <button mat-stroked-button (click)="copyLinkToClipboard()">
-    <mat-icon fontSet="material-symbols-outlined">link_24px</mat-icon>
+    <mat-icon>link_24px</mat-icon>
 
     <span i18n="@@app.labels.copyLink">Copy link</span>
   </button>
 
   <button mat-stroked-button (click)="copyQrCodeToClipboard()">
-    <mat-icon fontSet="material-symbols-outlined">qr_code_2_24px</mat-icon>
+    <mat-icon>qr_code_2_24px</mat-icon>
 
     <span i18n="@@app.labels.copyQrCode">Copy QR code</span>
   </button>

diff --git a/web/src/app/components/shared/general-access-control/general-access-control.component.html b/web/src/app/components/shared/general-access-control/general-access-control.component.html
@@ -16,7 +16,7 @@
 
 <div class="general-access-control-container">
   <div class="general-access-icon" [ngSwitch]="selectedGeneralAccess">
-    <mat-icon class="material-symbols-outlined">
+    <mat-icon>
       {{ generalAccessLabels.get(selectedGeneralAccess)?.icon ?? generalAccessLabels.get(SurveyGeneralAccess.RESTRICTED)?.icon }}
     </mat-icon>
   </div>

diff --git a/web/src/app/components/shared/header/header.component.html b/web/src/app/components/shared/header/header.component.html
@@ -31,7 +31,7 @@
     <ng-container *ngIf="canManage">
       <ng-container *ngIf="state === HeaderState.MAP_VIEW">
         <button mat-icon-button [matMenuTriggerFor]="editSurveyMenu">
-          <mat-icon fontSet="material-symbols-outlined">settings</mat-icon>
+          <mat-icon>settings</mat-icon>
         </button>
 
         <mat-menu #editSurveyMenu="matMenu">
@@ -77,7 +77,7 @@
 
     <ng-container *ngIf="authService.getUser$() | async as user">
       <button mat-icon-button [matMenuTriggerFor]="infoMenu">
-        <mat-icon fontSet="material-symbols-outlined">info_outline_24px</mat-icon>
+        <mat-icon>info_outline_24px</mat-icon>
       </button>
 
       <mat-menu #infoMenu="matMenu">

diff --git a/web/src/app/components/shared/loi-editor/loi-editor.component.html b/web/src/app/components/shared/loi-editor/loi-editor.component.html
@@ -67,7 +67,7 @@
           class="import-lois-button"
           (click)="importLois()"
         >
-          <mat-icon class="material-symbols-outlined">input</mat-icon>
+          <mat-icon>input</mat-icon>
 
           <span i18n="@@app.labels.import">Import</span>
         </button>
@@ -78,7 +78,7 @@
           class="clear-all-lois"
           (click)="clearLois()"
         >
-          <mat-icon class="material-symbols-outlined">delete</mat-icon>
+          <mat-icon>delete</mat-icon>
 
           <span i18n="@@app.labels.deleteAll">Delete all</span>
         </button>

diff --git a/web/src/app/components/shared/share-survey/share-survey.component.html b/web/src/app/components/shared/share-survey/share-survey.component.html
@@ -20,7 +20,7 @@
       <mat-card-title i18n="@@app.cards.share.title">People with access</mat-card-title>
 
       <button class="share-survey-button" mat-flat-button (click)="openShareDialog()">
-        <mat-icon class="material-symbols-outlined">add</mat-icon>
+        <mat-icon>add</mat-icon>
 
         <span i18n="@@app.labels.addParticipants">Add participants</span>
       </button>

diff --git a/web/src/app/components/shared/survey-list/survey-list.component.html b/web/src/app/components/shared/survey-list/survey-list.component.html
@@ -85,7 +85,6 @@ <h1 class="page-title" i18n="@@app.labels.surveys">Surveys</h1>
       <mat-card-header>
         <mat-icon
           mat-card-avatar
-          fontSet="material-symbols-outlined"
           class="add-icon general-access-icon"
         >
           <ng-container [ngSwitch]="survey.generalAccess">
@@ -117,7 +116,6 @@ <h1 class="page-title" i18n="@@app.labels.surveys">Surveys</h1>
   >
     <mat-icon
       *ngIf="icon || currentFilter() === filter"
-      fontSet="material-symbols-outlined"
       matChipAvatar
     >
       {{ currentFilter() !== filter ? icon : 'check' }}

diff --git a/web/src/app/components/shared/task-editor/add-task-button/add-task-button.component.html b/web/src/app/components/shared/task-editor/add-task-button/add-task-button.component.html
@@ -16,7 +16,7 @@
 
 <button class="task-button-wrapper">
   <div class="task-button">
-    <mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
+    <mat-icon>{{ icon }}</mat-icon>
     {{ text }}
   </div>
 </button>
diff --git a/web/src/app/components/shared/task-editor/task-form/edit-option/edit-option.component.html b/web/src/app/components/shared/task-editor/task-form/edit-option/edit-option.component.html
@@ -17,7 +17,7 @@
 <form [formGroup]="formGroup" class="edit-option" cdkDrag>
   <mat-icon class="drag-icon" cdkDragHandle>drag_indicator</mat-icon>
 
-  <mat-icon class="option-icon material-symbols-outlined">
+  <mat-icon class="option-icon">
     {{ type === Cardinality.SELECT_ONE ? 'radio_button_unchecked' : 'check_box_outline_blank'}}
   </mat-icon>
 

diff --git a/web/src/app/components/shared/task-editor/task-form/task-form.component.html b/web/src/app/components/shared/task-editor/task-form/task-form.component.html
@@ -25,21 +25,21 @@
         (selectionChange)="onTaskGroupSelect($event.value)"
       >
         <mat-select-trigger class="task-label">
-          <mat-icon class="material-symbols-outlined">{{ Tasks[taskGroup].icon }}</mat-icon>
+          <mat-icon>{{ Tasks[taskGroup].icon }}</mat-icon>
           <div>{{ Tasks[taskGroup].label }}</div>
         </mat-select-trigger>
 
         <mat-option *ngFor="let addLoiTaskGroup of AddLoiTaskGroups" [value]="addLoiTaskGroup">
           <div class="task-label">
-            <mat-icon class="material-symbols-outlined">{{ Tasks[addLoiTaskGroup].icon }}</mat-icon>
+            <mat-icon>{{ Tasks[addLoiTaskGroup].icon }}</mat-icon>
             <div>{{ Tasks[addLoiTaskGroup].label }}</div>
           </div>
         </mat-option>
       </mat-select>
     </div>
 
     <div *ngIf="!GeometryTasks.includes(taskGroup)" class="task-label">
-      <mat-icon class="material-symbols-outlined">{{ Tasks[taskGroup].icon }}</mat-icon>
+      <mat-icon>{{ Tasks[taskGroup].icon }}</mat-icon>
       <div>{{ Tasks[taskGroup].label }}</div>
     </div>
 
@@ -155,7 +155,7 @@
     </ground-edit-option>
 
     <div class="option-add-buttons">
-      <mat-icon class="option-icon material-symbols-outlined">
+      <mat-icon class="option-icon">
         {{ cardinalityControl.value === Cardinality.SELECT_ONE ? 'radio_button_unchecked' : 'check_box_outline_blank'}}
       </mat-icon>