From 2c1a9ff74fb6943ba2e92d53b0ca036927b3f061 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 8 Oct 2025 12:54:57 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=B1(frontend)=20add=20material-symbols?=
 =?UTF-8?q?-outlined=20font?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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            |  1 +
 src/frontend/apps/impress/src/components/Icon.tsx | 13 ++++++++++---
 src/frontend/apps/impress/src/pages/globals.css   |  9 +++++++--
 src/frontend/yarn.lock                            |  5 +++++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json
index 69dc0045..837da970 100644
--- a/src/frontend/apps/impress/package.json
+++ b/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",
diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx
index b0820169..fd1458a8 100644
--- a/src/frontend/apps/impress/src/components/Icon.tsx
+++ b/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>
diff --git a/src/frontend/apps/impress/src/pages/globals.css b/src/frontend/apps/impress/src/pages/globals.css
index b09c0d5f..aa9a8385 100644
--- a/src/frontend/apps/impress/src/pages/globals.css
+++ b/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;
 }
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
index 61406b85..379e67a7 100644
--- a/src/frontend/yarn.lock
+++ b/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"