Pill buttons consistency

src/app/components/navigation/navbar/navbar.component.scss

@@ -138,7 +138,7 @@ img.account-image {
   justify-content: center;
   align-items: center;
   //background-color: green !important;
-  font-size: 16px;
+  font-size: 14px;
   width: 40px !important;
   height: 40px !important;
   vertical-align: middle;

src/app/components/selection/selection-tab/selection-tab.component.html

@@ -1,7 +1,7 @@
 @if (selectionService.isSelectionMode()) {
   <div class="selection" [class.has-selection]="selectionService.selectedElements().length > 0">
     <button mat-icon-button (click)="selectionService.toggleSelectionMode()">
-      <mat-icon>close</mat-icon>
+      <mat-icon class="material-symbols-filled">close</mat-icon>
     </button>
     <p [class.disabled]="!selectionService.hasSelection()">
       {{ selectionService.selectedElements().length }} {{ 'selected' | translate }}

src/app/components/selection/selection-tab/selection-tab.component.scss

@@ -29,6 +29,8 @@
 
     mat-icon {
       font-size: 24px;
+      width: 24px;
+      height: 24px;
       text-align: center;
     }
   }
@@ -52,12 +54,6 @@
   font-weight: 400;
   border-radius: 25px;
   letter-spacing: normal;
-
-  .mat-icon {
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-  }
 }
 
 .disabled {

src/app/components/upload/upload.component.html

@@ -19,13 +19,13 @@ <h3>{{ 'Please consider switching to a different browser!' | translate }}</h3>
       ><span class="hide-on-collapse">{{ 'Also supported' | translate }}:</span>
     </span>
 
-    <mat-icon class="toggle-icon material-symbols-outlined">expand_more</mat-icon>
+    <mat-icon class="toggle-icon material-symbols-filled">expand_more</mat-icon>
   </div>
 
   <div id="fileFormats" class="hide-on-collapse">
     <div class="file-format-line" [class.disabled]="isDetermined() && !isModel()">
       <div>
-        <mat-icon>language</mat-icon>
+        <mat-icon class="material-symbols-filled">language</mat-icon>
         <span>{{ '3D objects' | translate }}</span>
       </div>
       <span> <b>.glb</b></span>
@@ -150,7 +150,7 @@ <h3>{{ 'Please consider switching to a different browser!' | translate }}</h3>
                   >warning</mat-icon
                 >
               } @else if (item.checksum) {
-                <mat-icon class="material-symbols-outlined">draft</mat-icon>
+                <mat-icon class="material-symbols-filled">draft</mat-icon>
               } @else {
                 <mat-progress-spinner mode="indeterminate" diameter="20" />
               }
@@ -239,7 +239,7 @@ <h3>{{ 'Maximum file size exceeded' | translate }}</h3>
                 (click)="fileRef.click()"
                 [matTooltip]="'Select one or multiple files' | translate"
               >
-                <mat-icon class="material-symbols-outlined">description</mat-icon>
+                <mat-icon class="material-symbols-filled">description</mat-icon>
                 {{ 'Select file(s)' | translate }}
               </button>
 
@@ -257,7 +257,7 @@ <h3>{{ 'Maximum file size exceeded' | translate }}</h3>
                 (click)="fileInput.click()"
                 [matTooltip]="'If your 3D object includes folders, choose this option' | translate"
               >
-                <mat-icon class="material-symbols-outlined">folder</mat-icon>
+                <mat-icon class="material-symbols-filled">folder</mat-icon>
                 {{ 'Select folder' | translate }}
               </button>
             </div>

src/app/components/upload/upload.component.scss

@@ -141,7 +141,7 @@ div.queue-item-list {
 }
 
 button {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   border-radius: 25px;
   letter-spacing: normal;

src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.html

@@ -71,7 +71,7 @@
     style="align-self: flex-start"
     (click)="closeSidenav()"
   >
-    <mat-icon>arrow_forward</mat-icon>
+    <mat-icon class="material-symbols-filled">arrow_forward</mat-icon>
     {{ 'Show results' | translate }}
     @if (service.resultCount() >= 0) {
       <span class="result-count">({{ service.resultCount() }})</span>
@@ -85,7 +85,7 @@
     (click)="clearAllFilterOptions()"
     [disabled]="numFilterOptions() === 0"
   >
-    <mat-icon>refresh</mat-icon>
+    <mat-icon class="material-symbols-filled">refresh</mat-icon>
     {{ 'Clear all' | translate }}
   </button>
 </div>

src/app/pages/explore/explore.component.html

@@ -17,7 +17,10 @@ <h1 class="page-heading">{{ 'Explore' | translate }}</h1>
             [disabled]="!isAuthenticated()"
             (click)="quickAddToCompilation()"
           >
-            <mat-icon [matTooltip]="'Add to collection' | translate" color="primary"
+            <mat-icon
+              class="material-symbols-filled"
+              [matTooltip]="'Add to collection' | translate"
+              color="primary"
               >library_add</mat-icon
             >
           </button>
@@ -28,7 +31,7 @@ <h1 class="page-heading">{{ 'Explore' | translate }}</h1>
           color="primary"
           [matMenuTriggerFor]="getMenuForSelected()"
         >
-          <mat-icon>more_horiz</mat-icon>
+          <mat-icon class="material-symbols-filled">more_horiz</mat-icon>
         </button>
         <mat-menu #entityMenu="matMenu" yPosition="below">
           <button
@@ -46,7 +49,7 @@ <h1 class="page-heading">{{ 'Explore' | translate }}</h1>
             [class.pseudo-disabled]="!isAuthenticated()"
             [disabled]="!isAuthenticated()"
           >
-            <mat-icon color="primary">library_add</mat-icon>
+            <mat-icon class="material-symbols-filled" color="primary">library_add</mat-icon>
             <span>{{ 'Add to collection' | translate }}</span>
           </button>
         </mat-menu>
@@ -56,7 +59,7 @@ <h1 class="page-heading">{{ 'Explore' | translate }}</h1>
             [disabled]="!selectionService().singleSelected()"
             [routerLink]="['/compilation', selectionService().singleSelectedCompilation()?._id]"
           >
-            <mat-icon class="material-symbols-outlined" color="primary">open_run</mat-icon>
+            <mat-icon class="material-symbols-filled" color="primary">open_run</mat-icon>
             {{ 'Open' | translate }}
           </button>
         </mat-menu>
@@ -81,7 +84,7 @@ <h1 class="page-heading">{{ 'Explore' | translate }}</h1>
       "
       (click)="openFilterSidenav()"
     >
-      <mat-icon>tune</mat-icon>
+      <mat-icon class="material-symbols-filled">tune</mat-icon>
 
       @if (numFilterOptions() > 0) {
         <span>{{ numFilterOptions() }}</span>
@@ -156,12 +159,12 @@ <h1 class="page-heading">{{ 'Explore' | translate }}</h1>
               (click)="selectObjectId = element._id"
               (menuClosed)="selectObjectId = ''"
             >
-              <mat-icon>more_horiz</mat-icon>
+              <mat-icon class="material-symbols-filled">more_horiz</mat-icon>
             </button>
           }
           <mat-menu #menu="matMenu">
             <a mat-menu-item [routerLink]="getElementRoute(element)">
-              <mat-icon class="material-symbols-outlined" color="primary">open_run</mat-icon>
+              <mat-icon class="material-symbols-filled" color="primary">open_run</mat-icon>
               <span>{{ 'Open' | translate }}</span>
             </a>
             @if (selectedTab() === 'objects') {
@@ -172,7 +175,7 @@ <h1 class="page-heading">{{ 'Explore' | translate }}</h1>
                   [class.pseudo-disabled]="!isAuthenticated()"
                   [disabled]="!isAuthenticated()"
                 >
-                  <mat-icon color="primary">library_add</mat-icon>
+                  <mat-icon class="material-symbols-filled" color="primary">library_add</mat-icon>
                   <span>{{ 'Add to collection' | translate }}</span>
                 </button>
               }
@@ -215,9 +218,9 @@ <h1 class="page-heading">{{ 'Explore' | translate }}</h1>
     </small>
   }
   <button mat-icon-button (click)="previousPage()" [disabled]="!canNavigatePrevious()">
-    <mat-icon>chevron_left</mat-icon>
+    <mat-icon class="material-symbols-filled">chevron_left</mat-icon>
   </button>
   <button mat-icon-button (click)="nextPage()" [disabled]="!canNavigateNext()">
-    <mat-icon>chevron_right</mat-icon>
+    <mat-icon class="material-symbols-filled">chevron_right</mat-icon>
   </button>
 </div>

src/app/pages/profile-page/profile-page-header/profile-page-header.component.html

@@ -12,7 +12,7 @@
       <h1>{{ availableName() }}</h1>
 
       <button mat-flat-button class="pill" color="primary" (click)="editProfile.emit()">
-        <mat-icon>edit</mat-icon>
+        <mat-icon class="material-symbols-filled">edit</mat-icon>
         {{ 'Edit' | translate }}
       </button>
     </div>

src/app/pages/profile-page/profile-page-header/profile-page-header.component.scss

@@ -1,3 +1,5 @@
+@use 'src/assets/fonts/MaterialSymbols/MaterialSymbolsOutlined' as materialSymbols;
+
 .profile-header {
   display: flex;
   align-items: center;
@@ -51,7 +53,6 @@
 
 .profile-data h1 {
   margin: 0;
-
   color: var(--brand-color);
 }
 
@@ -69,8 +70,7 @@
 }
 
 .text-icon {
-  width: 1em;
-  height: 1em;
+  @include materialSymbols.material-symbols-filled(1em);
   margin-right: 8px;
   border-radius: 50%;
 }

src/assets/fonts/MaterialSymbols/MaterialSymbolsOutlined.scss

@@ -12,6 +12,8 @@
   font-weight: normal;
   font-style: normal;
   font-size: $size;
+  width: $size;
+  height: $size;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
@@ -27,20 +29,28 @@
     'opsz' 48;
 }
 
-.material-symbols-outlined {
-  @include material-symbols();
+@mixin material-symbols-outlined($size: 24px) {
+  @include material-symbols($size);
   font-variation-settings:
     'FILL' 0,
     'wght' 400,
     'GRAD' 200,
     'opsz' 48;
 }
 
-.material-symbols-filled {
-  @include material-symbols();
+@mixin material-symbols-filled($size: 24px) {
+  @include material-symbols($size);
   font-variation-settings:
     'FILL' 1,
     'wght' 400,
     'GRAD' 200,
     'opsz' 48;
 }
+
+.material-symbols-outlined {
+  @include material-symbols-outlined();
+}
+
+.material-symbols-filled {
+  @include material-symbols-filled();
+}