feat: dynamic icons by adding material symbols font (#5008)

https://linear.app/unleash/issue/2-1502/add-support-for-custom-dynamic-icons-mui-icon-component Adds support for custom dynamic icons by adding the [Material Symbols Outlined font](https://fonts.google.com/icons) and setting the MUI Icon component base class. See: https://mui.com/material-ui/icons/#icon-font-icons Message banner use case: This will not only enable us to set custom icons for external message banners, but will also let users configure their desired icon from the set of options in the font.
Unleash · Oct 12, 2023 · 2ab2aa1 · 2ab2aa1
1 parent 2059706
commit 2ab2aa1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git 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
@@ -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
@@ -529,5 +529,11 @@ export default createTheme({
                 }),
             },
         },
+
+        MuiIcon: {
+            defaultProps: {
+                baseClassName: 'material-symbols-outlined',
+            },
+        },
     },
 });