From 94a4f5254595fa78e5a4c0dde18f2c1fff54f5b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Senya=20B=C3=A4r?= <senya.baer@gmail.com>
Date: Wed, 6 May 2026 17:43:12 +0200
Subject: [PATCH 1/2] Pill buttons consistency

---
 .../components/navigation/navbar/navbar.component.scss |  8 +++++++-
 .../selection-tab/selection-tab.component.scss         |  2 ++
 src/app/components/upload/upload.component.html        | 10 +++++-----
 src/app/components/upload/upload.component.scss        |  2 +-
 .../explore-filter-sidenav.component.scss              |  8 ++++++++
 src/app/pages/explore/explore.component.html           |  2 +-
 src/app/pages/explore/explore.component.scss           |  6 ++++++
 .../profile-page-header.component.scss                 |  8 +++++++-
 8 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/app/components/navigation/navbar/navbar.component.scss b/src/app/components/navigation/navbar/navbar.component.scss
index 8d7998e2..7ac5d562 100644
--- a/src/app/components/navigation/navbar/navbar.component.scss
+++ b/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;
@@ -146,6 +146,12 @@ img.account-image {
   padding: 0;
 }
 
+mat-icon.material-symbols-filled {
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+  }
+
 .menu-user-name {
   color: var(--brand-color);
 }
diff --git a/src/app/components/selection/selection-tab/selection-tab.component.scss b/src/app/components/selection/selection-tab/selection-tab.component.scss
index acbbc532..bc253650 100644
--- a/src/app/components/selection/selection-tab/selection-tab.component.scss
+++ b/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;
     }
   }
diff --git a/src/app/components/upload/upload.component.html b/src/app/components/upload/upload.component.html
index 8dd73a7f..83f74913 100644
--- a/src/app/components/upload/upload.component.html
+++ b/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>
diff --git a/src/app/components/upload/upload.component.scss b/src/app/components/upload/upload.component.scss
index f076dc04..1d116e25 100644
--- a/src/app/components/upload/upload.component.scss
+++ b/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;
diff --git a/src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.scss b/src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.scss
index 54c0beac..3d63bd55 100644
--- a/src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.scss
+++ b/src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.scss
@@ -20,6 +20,14 @@ button.clear-all-button {
   align-self: flex-start;
 }
 
+button{
+  mat-icon {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  }
+}
+
 div.button-row {
   display: flex;
   flex-flow: row wrap;
diff --git a/src/app/pages/explore/explore.component.html b/src/app/pages/explore/explore.component.html
index 070ecbad..e156e40a 100644
--- a/src/app/pages/explore/explore.component.html
+++ b/src/app/pages/explore/explore.component.html
@@ -56,7 +56,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>
diff --git a/src/app/pages/explore/explore.component.scss b/src/app/pages/explore/explore.component.scss
index 857dab00..cb7e6d6d 100644
--- a/src/app/pages/explore/explore.component.scss
+++ b/src/app/pages/explore/explore.component.scss
@@ -118,6 +118,12 @@ mat-option {
   }
 }
 
+.mat-icon{
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
 .content {
   box-sizing: border-box;
   flex-direction: column;
diff --git a/src/app/pages/profile-page/profile-page-header/profile-page-header.component.scss b/src/app/pages/profile-page/profile-page-header/profile-page-header.component.scss
index d4d3f67d..6f6c479a 100644
--- a/src/app/pages/profile-page/profile-page-header/profile-page-header.component.scss
+++ b/src/app/pages/profile-page/profile-page-header/profile-page-header.component.scss
@@ -51,7 +51,6 @@
 
 .profile-data h1 {
   margin: 0;
-
   color: var(--brand-color);
 }
 
@@ -74,3 +73,10 @@
   margin-right: 8px;
   border-radius: 50%;
 }
+
+.profile-header-row mat-icon {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+}
+

From b7f23a6febfec5331094113a5c36ecd0fcf93d07 Mon Sep 17 00:00:00 2001
From: Kai Niebes <kai.niebes@outlook.com>
Date: Fri, 29 May 2026 18:43:14 +0200
Subject: [PATCH 2/2] Move mat-icon styles to according MaterialSymbols styles
 definition

---
 .../navigation/navbar/navbar.component.scss   |  6 ------
 .../selection-tab.component.html              |  2 +-
 .../selection-tab.component.scss              |  6 ------
 .../explore-filter-sidenav.component.html     |  4 ++--
 .../explore-filter-sidenav.component.scss     |  8 -------
 src/app/pages/explore/explore.component.html  | 21 +++++++++++--------
 src/app/pages/explore/explore.component.scss  |  6 ------
 .../profile-page-header.component.html        |  2 +-
 .../profile-page-header.component.scss        | 12 +++--------
 .../MaterialSymbolsOutlined.scss              | 18 ++++++++++++----
 10 files changed, 33 insertions(+), 52 deletions(-)

diff --git a/src/app/components/navigation/navbar/navbar.component.scss b/src/app/components/navigation/navbar/navbar.component.scss
index 7ac5d562..b45ae0c8 100644
--- a/src/app/components/navigation/navbar/navbar.component.scss
+++ b/src/app/components/navigation/navbar/navbar.component.scss
@@ -146,12 +146,6 @@ img.account-image {
   padding: 0;
 }
 
-mat-icon.material-symbols-filled {
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-  }
-
 .menu-user-name {
   color: var(--brand-color);
 }
diff --git a/src/app/components/selection/selection-tab/selection-tab.component.html b/src/app/components/selection/selection-tab/selection-tab.component.html
index b1bd0f12..dc8d21ff 100644
--- a/src/app/components/selection/selection-tab/selection-tab.component.html
+++ b/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 }}
diff --git a/src/app/components/selection/selection-tab/selection-tab.component.scss b/src/app/components/selection/selection-tab/selection-tab.component.scss
index bc253650..a8321f6c 100644
--- a/src/app/components/selection/selection-tab/selection-tab.component.scss
+++ b/src/app/components/selection/selection-tab/selection-tab.component.scss
@@ -54,12 +54,6 @@
   font-weight: 400;
   border-radius: 25px;
   letter-spacing: normal;
-
-  .mat-icon {
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-  }
 }
 
 .disabled {
diff --git a/src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.html b/src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.html
index b7f94e3b..58060f89 100644
--- a/src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.html
+++ b/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>
diff --git a/src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.scss b/src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.scss
index 3d63bd55..54c0beac 100644
--- a/src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.scss
+++ b/src/app/pages/explore/explore-filter-sidenav/explore-filter-sidenav.component.scss
@@ -20,14 +20,6 @@ button.clear-all-button {
   align-self: flex-start;
 }
 
-button{
-  mat-icon {
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
-  }
-}
-
 div.button-row {
   display: flex;
   flex-flow: row wrap;
diff --git a/src/app/pages/explore/explore.component.html b/src/app/pages/explore/explore.component.html
index e156e40a..aa8877a0 100644
--- a/src/app/pages/explore/explore.component.html
+++ b/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>
@@ -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>
diff --git a/src/app/pages/explore/explore.component.scss b/src/app/pages/explore/explore.component.scss
index cb7e6d6d..857dab00 100644
--- a/src/app/pages/explore/explore.component.scss
+++ b/src/app/pages/explore/explore.component.scss
@@ -118,12 +118,6 @@ mat-option {
   }
 }
 
-.mat-icon{
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
-}
-
 .content {
   box-sizing: border-box;
   flex-direction: column;
diff --git a/src/app/pages/profile-page/profile-page-header/profile-page-header.component.html b/src/app/pages/profile-page/profile-page-header/profile-page-header.component.html
index d6ca89be..06708c38 100644
--- a/src/app/pages/profile-page/profile-page-header/profile-page-header.component.html
+++ b/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>
diff --git a/src/app/pages/profile-page/profile-page-header/profile-page-header.component.scss b/src/app/pages/profile-page/profile-page-header/profile-page-header.component.scss
index 6f6c479a..dd4e4f07 100644
--- a/src/app/pages/profile-page/profile-page-header/profile-page-header.component.scss
+++ b/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;
@@ -68,15 +70,7 @@
 }
 
 .text-icon {
-  width: 1em;
-  height: 1em;
+  @include materialSymbols.material-symbols-filled(1em);
   margin-right: 8px;
   border-radius: 50%;
 }
-
-.profile-header-row mat-icon {
-  font-size: 24px;
-  width: 24px;
-  height: 24px;
-}
-
diff --git a/src/assets/fonts/MaterialSymbols/MaterialSymbolsOutlined.scss b/src/assets/fonts/MaterialSymbols/MaterialSymbolsOutlined.scss
index fa36d7f5..0e17e6cb 100644
--- a/src/assets/fonts/MaterialSymbols/MaterialSymbolsOutlined.scss
+++ b/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,8 +29,8 @@
     '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,
@@ -36,11 +38,19 @@
     '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();
+}