diff --git a/frontend/index.html b/frontend/index.html
index a74fbe07c1..5f9089c542 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -16,6 +16,10 @@
             href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap"
             rel="stylesheet"
         />
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
+        />
     </head>
     <body>
         <div id="app"></div>
diff --git a/frontend/src/themes/dark-theme.ts b/frontend/src/themes/dark-theme.ts
index e2c78022c9..e6535b2f3a 100644
--- a/frontend/src/themes/dark-theme.ts
+++ b/frontend/src/themes/dark-theme.ts
@@ -617,5 +617,11 @@ export default createTheme({
                 }),
             },
         },
+
+        MuiIcon: {
+            defaultProps: {
+                baseClassName: 'material-symbols-outlined',
+            },
+        },
     },
 });
diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
index a77936aee8..7bd227bb21 100644
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@@ -529,5 +529,11 @@ export default createTheme({
                 }),
             },
         },
+
+        MuiIcon: {
+            defaultProps: {
+                baseClassName: 'material-symbols-outlined',
+            },
+        },
     },
 });
