🍱(frontend) add material-symbols-outlined font

The design uses Material Symbols for icons.
This commit adds the font to the project and
updates the Icon component to be able to use it.

src/frontend/apps/impress/package.json

@@ -31,6 +31,7 @@
     "@emoji-mart/data": "1.2.1",
     "@emoji-mart/react": "1.1.1",
     "@fontsource-variable/inter": "5.2.8",
+    "@fontsource-variable/material-symbols-outlined": "5.2.25",
     "@fontsource/material-icons": "5.2.5",
     "@gouvfr-lasuite/integration": "1.0.3",
     "@gouvfr-lasuite/ui-kit": "0.16.1",

src/frontend/apps/impress/src/components/Icon.tsx

@@ -4,12 +4,16 @@ import { css } from 'styled-components';
 import { Text, TextType } from '@/components';
 
 type IconProps = TextType & {
+  disabled?: boolean;
   iconName: string;
-  variant?: 'filled' | 'outlined';
+  variant?: 'filled' | 'outlined' | 'symbols-outlined';
 };
 export const Icon = ({
+  className,
   iconName,
+  disabled,
   variant = 'outlined',
+  $variation,
   ...textProps
 }: IconProps) => {
   const hasLabel = 'aria-label' in textProps || 'aria-labelledby' in textProps;
@@ -18,12 +22,15 @@ export const Icon = ({
 
   return (
     <Text
-      {...textProps}
       aria-hidden={ariaHidden}
-      className={clsx('--docs--icon-bg', textProps.className, {
+      className={clsx('--docs--icon-bg', className, {
         'material-icons-filled': variant === 'filled',
         'material-icons': variant === 'outlined',
+        'material-symbols-outlined': variant === 'symbols-outlined',
       })}
+      $variation={disabled ? '300' : $variation}
+      aria-disabled={disabled}
+      {...textProps}
     >
       {iconName}
     </Text>

src/frontend/apps/impress/src/pages/globals.css

@@ -1,6 +1,7 @@
 @import url('../cunningham/cunningham-style.css');
 @import url('@fontsource/material-icons');
 @import url('@fontsource/material-icons-outlined');
+@import url('@fontsource-variable/material-symbols-outlined');
 @import url('@fontsource-variable/inter');
 @import url('/assets/fonts/Marianne/Marianne-font.css');
 
@@ -47,13 +48,13 @@ main ::-webkit-scrollbar-thumb:hover,
 }
 
 .material-icons,
-.material-icons-filled {
+.material-icons-filled,
+.material-symbols-outlined {
   font-family: 'Material Icons Outlined', 'Material Icons', sans-serif;
   font-weight: normal;
   font-style: normal;
   font-size: 24px; /* Preferred icon size */
   display: inline-block;
-  line-height: 1;
   text-transform: none;
   letter-spacing: normal;
   overflow-wrap: normal;
@@ -77,6 +78,10 @@ main ::-webkit-scrollbar-thumb:hover,
   font-family: 'Material Icons', sans-serif;
 }
 
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined Variable', sans-serif;
+}
+
 [data-nextjs-dialog-overlay] {
   display: none !important;
 }

src/frontend/yarn.lock

@@ -1714,6 +1714,11 @@
   resolved "https://registry.yarnpkg.com/@fontsource-variable/inter/-/inter-5.2.8.tgz#29b11476f5149f6a443b4df6516e26002d87941a"
   integrity sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==
 
+"@fontsource-variable/material-symbols-outlined@5.2.25":
+  version "5.2.25"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/material-symbols-outlined/-/material-symbols-outlined-5.2.25.tgz#c2ec742ca9d890a408cb657c65ddc1a6da8f3085"
+  integrity sha512-SEUmtSiqxVpLcOd1S5tVCnTXy3I2PBm/dZH/rvpfEady6Ab+l+rwIqdbjEqb6NrggcX8usGJfGYpN9cY6QCuJg==
+
 "@fontsource-variable/roboto-flex@5.2.5":
   version "5.2.5"
   resolved "https://registry.yarnpkg.com/@fontsource-variable/roboto-flex/-/roboto-flex-5.2.5.tgz#38368ea754697c2fdf08df11b06e8b6d391ff4c1"