From c47e830b407c66d3aedef30b2b8a5d736d1b341a Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 8 Jan 2026 12:23:25 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20introduce=20an?=
 =?UTF-8?q?=20Icon=20primitive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Encapsulate icon and symbol rendering in a dedicated component that applies
aria-hidden and disables translation attributes.

This prevents browsers from translating icon names and breaking the UI, and
ensures screen readers do not announce decorative icons.

This is a first draft and can be extended with additional variants later.
---
 src/frontend/src/App.tsx                      |  2 +
 .../recording/components/ControlsButton.tsx   | 40 +++++------
 .../recording/components/LoginPrompt.tsx      |  6 +-
 .../components/RecordingStatusIcon.tsx        |  5 +-
 .../recording/components/RequestRecording.tsx |  4 +-
 .../recording/components/RowWrapper.tsx       |  3 +-
 .../rooms/livekit/components/Tools.tsx        |  8 +--
 .../components/SettingsDialogExtended.tsx     |  3 +-
 src/frontend/src/primitives/Icon.tsx          | 71 +++++++++++++++++++
 src/frontend/src/primitives/index.ts          |  1 +
 src/frontend/src/styles/icons.css             | 27 -------
 src/frontend/src/styles/index.css             |  1 -
 12 files changed, 105 insertions(+), 66 deletions(-)
 create mode 100644 src/frontend/src/primitives/Icon.tsx
 delete mode 100644 src/frontend/src/styles/icons.css

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 0a1d3c7e..4bcf5ec8 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -1,3 +1,5 @@
+import '@fontsource/material-icons-outlined'
+import '@fontsource-variable/material-symbols-outlined'
 import '@livekit/components-styles'
 import '@/styles/index.css'
 import { Suspense } from 'react'
diff --git a/src/frontend/src/features/recording/components/ControlsButton.tsx b/src/frontend/src/features/recording/components/ControlsButton.tsx
index 94e72aa9..33694db8 100644
--- a/src/frontend/src/features/recording/components/ControlsButton.tsx
+++ b/src/frontend/src/features/recording/components/ControlsButton.tsx
@@ -1,7 +1,7 @@
-import { css, cx } from '@/styled-system/css'
+import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { Spinner } from '@/primitives/Spinner'
-import { Button, Text } from '@/primitives'
+import { Button, Icon, Text } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { RecordingStatuses } from '../hooks/useRecordingStatuses'
 import { ReactNode, useEffect, useRef, useState } from 'react'
@@ -141,31 +141,23 @@ export const ControlsButton = ({
           })}
           onPress={() => openSidePanel()}
         >
-          <span
-            className={cx(
-              'material-icons',
-              css({
-                color: 'primary.500',
-                marginRight: '1rem',
-              })
-            )}
-          >
-            info
-          </span>
+          <Icon
+            className={css({
+              color: 'primary.500',
+              marginRight: '1rem',
+            })}
+            name="info"
+          />
           <Text variant={'smNote'}>
             {parseLineBreaks(t('button.anotherModeStarted'))}
           </Text>
-          <span
-            className={cx(
-              'material-icons',
-              css({
-                color: 'primary.500',
-                marginLeft: 'auto',
-              })
-            )}
-          >
-            chevron_right
-          </span>
+          <Icon
+            className={css({
+              color: 'primary.500',
+              marginLeft: 'auto',
+            })}
+            name="chevron_right"
+          />
         </RACButton>
       )}
       <Button
diff --git a/src/frontend/src/features/recording/components/LoginPrompt.tsx b/src/frontend/src/features/recording/components/LoginPrompt.tsx
index d73d8cf2..e46740ba 100644
--- a/src/frontend/src/features/recording/components/LoginPrompt.tsx
+++ b/src/frontend/src/features/recording/components/LoginPrompt.tsx
@@ -1,4 +1,4 @@
-import { H, Text } from '@/primitives'
+import { H, Text, Icon } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { LoginButton } from '@/components/LoginButton'
 import { HStack } from '@/styled-system/jsx'
@@ -24,9 +24,7 @@ export const LoginPrompt = ({ heading, body }: LoginPromptProps) => {
       })}
     >
       <HStack justify="start" alignItems="center" marginBottom="0.5rem">
-        <span className="material-symbols" aria-hidden={true}>
-          login
-        </span>
+        <Icon type="symbols" name="login" />
         <H lvl={3} margin={false} padding={false}>
           {heading}
         </H>
diff --git a/src/frontend/src/features/recording/components/RecordingStatusIcon.tsx b/src/frontend/src/features/recording/components/RecordingStatusIcon.tsx
index 64bf85f3..7bf65cb9 100644
--- a/src/frontend/src/features/recording/components/RecordingStatusIcon.tsx
+++ b/src/frontend/src/features/recording/components/RecordingStatusIcon.tsx
@@ -1,4 +1,5 @@
 import { Spinner } from '@/primitives/Spinner'
+import { Icon } from '@/primitives'
 
 interface RecordingStatusIconProps {
   isStarted: boolean
@@ -14,8 +15,8 @@ export const RecordingStatusIcon = ({
   }
 
   if (isTranscriptActive) {
-    return <span className="material-symbols">speech_to_text</span>
+    return <Icon type="symbols" name="speech_to_text" />
   }
 
-  return <span className="material-symbols">screen_record</span>
+  return <Icon type="symbols" name="screen_record" />
 }
diff --git a/src/frontend/src/features/recording/components/RequestRecording.tsx b/src/frontend/src/features/recording/components/RequestRecording.tsx
index 9cef50c4..8af710bd 100644
--- a/src/frontend/src/features/recording/components/RequestRecording.tsx
+++ b/src/frontend/src/features/recording/components/RequestRecording.tsx
@@ -1,4 +1,4 @@
-import { Button, H, Text } from '@/primitives'
+import { Button, Icon, H, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { useEffect, useRef, useState } from 'react'
@@ -59,7 +59,7 @@ export const RequestRecording = ({
       })}
     >
       <HStack justify="start" alignItems="center" marginBottom="0.5rem">
-        <span className="material-symbols">person_raised_hand</span>
+        <Icon type="symbols" name="person_raised_hand" />
         <H lvl={3} margin={false} padding={false}>
           {heading}
         </H>
diff --git a/src/frontend/src/features/recording/components/RowWrapper.tsx b/src/frontend/src/features/recording/components/RowWrapper.tsx
index 41d8eab0..f94140a0 100644
--- a/src/frontend/src/features/recording/components/RowWrapper.tsx
+++ b/src/frontend/src/features/recording/components/RowWrapper.tsx
@@ -1,5 +1,6 @@
 import { css } from '@/styled-system/css'
 import { ReactNode } from 'react'
+import { Icon } from '@/primitives'
 
 type RowPosition = 'first' | 'middle' | 'last' | 'single'
 
@@ -45,7 +46,7 @@ export const RowWrapper = ({
         })}
       >
         {/*  fixme - doesn't handle properly material-symbols  */}
-        <span className="material-icons">{iconName}</span>
+        <Icon name={iconName} />
       </div>
       <div
         className={css({
diff --git a/src/frontend/src/features/rooms/livekit/components/Tools.tsx b/src/frontend/src/features/rooms/livekit/components/Tools.tsx
index b8f4a364..d28d899b 100644
--- a/src/frontend/src/features/rooms/livekit/components/Tools.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/Tools.tsx
@@ -1,4 +1,4 @@
-import { A, Div, Text } from '@/primitives'
+import { A, Div, Icon, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { Button as RACButton } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
@@ -87,7 +87,7 @@ const ToolButton = ({
           alignItems: 'center',
         })}
       >
-        <span className="material-symbols">chevron_forward</span>
+        <Icon type="symbols" name="chevron_forward" />
       </div>
     </RACButton>
   )
@@ -163,7 +163,7 @@ export const Tools = () => {
       </Text>
       {isTranscriptEnabled && (
         <ToolButton
-          icon={<span className="material-symbols">speech_to_text</span>}
+          icon={<Icon type="symbols" name="speech_to_text" />}
           title={t('tools.transcript.title')}
           description={t('tools.transcript.body')}
           onPress={() => openTranscript()}
@@ -171,7 +171,7 @@ export const Tools = () => {
       )}
       {isScreenRecordingEnabled && (
         <ToolButton
-          icon={<span className="material-symbols">mode_standby</span>}
+          icon={<Icon type="symbols" name="mode_standby" />}
           title={t('tools.screenRecording.title')}
           description={t('tools.screenRecording.body')}
           onPress={() => openScreenRecording()}
diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
index 6daf33f5..a67776d0 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
@@ -2,6 +2,7 @@ import { Dialog, type DialogProps } from '@/primitives'
 import { Tab, Tabs, TabList } from '@/primitives/Tabs.tsx'
 import { css } from '@/styled-system/css'
 import { text } from '@/primitives/Text.tsx'
+import { Icon } from '@/primitives/Icon'
 import { Heading } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import {
@@ -106,7 +107,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
             </Tab>
             {isAdminOrOwner && (
               <Tab icon highlight id={SettingsDialogExtendedKey.TRANSCRIPTION}>
-                <span className="material-symbols">speech_to_text</span>
+                <Icon type="symbols" name="speech_to_text" />
                 {isWideScreen &&
                   t(`tabs.${SettingsDialogExtendedKey.TRANSCRIPTION}`)}
               </Tab>
diff --git a/src/frontend/src/primitives/Icon.tsx b/src/frontend/src/primitives/Icon.tsx
new file mode 100644
index 00000000..7275fad0
--- /dev/null
+++ b/src/frontend/src/primitives/Icon.tsx
@@ -0,0 +1,71 @@
+import { cva, RecipeVariantProps } from '@/styled-system/css'
+import { ComponentPropsWithoutRef } from 'react'
+
+const iconRecipe = cva({
+  base: {
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    display: 'inline-block',
+    lineHeight: 1,
+    textTransform: 'none',
+    letterSpacing: 'normal',
+    wordWrap: 'normal',
+    whiteSpace: 'nowrap',
+    direction: 'ltr',
+  },
+  variants: {
+    type: {
+      icons: {
+        fontFamily: 'Material Icons Outlined',
+        webkitFontSmoothing: 'antialiased',
+        mozOsxFontSmoothing: 'grayscale',
+        textRendering: 'optimizeLegibility',
+        fontFeatureSettings: '"liga"',
+      },
+      symbols: {
+        fontFamily: 'Material Symbols Outlined Variable',
+      },
+    },
+    size: {
+      sm: {
+        fontSize: '18px',
+      },
+      md: {
+        fontSize: '24px',
+      },
+      lg: {
+        fontSize: '32px',
+      },
+      xl: {
+        fontSize: '40px',
+      },
+    },
+  },
+  defaultVariants: {
+    type: 'icons',
+    size: 'md',
+  },
+})
+
+export type IconRecipeProps = RecipeVariantProps<typeof iconRecipe>
+
+export type IconProps = IconRecipeProps &
+  ComponentPropsWithoutRef<'span'> & {
+    name: string
+  }
+
+export const Icon = ({ name, ...props }: IconProps) => {
+  const [variantProps, componentProps] = iconRecipe.splitVariantProps(props)
+  const { className, ...remainingComponentProps } = componentProps
+
+  return (
+    <span
+      translate="no"
+      aria-hidden="true"
+      className={[iconRecipe(variantProps), className].join(' ')}
+      {...remainingComponentProps}
+    >
+      {name}
+    </span>
+  )
+}
diff --git a/src/frontend/src/primitives/index.ts b/src/frontend/src/primitives/index.ts
index aff190d0..b8fc32c3 100644
--- a/src/frontend/src/primitives/index.ts
+++ b/src/frontend/src/primitives/index.ts
@@ -30,3 +30,4 @@ export { Ul } from './Ul'
 export { VerticallyOffCenter } from './VerticallyOffCenter'
 export { TextArea } from './TextArea'
 export { Switch } from './Switch'
+export { Icon } from './Icon'
diff --git a/src/frontend/src/styles/icons.css b/src/frontend/src/styles/icons.css
deleted file mode 100644
index c8c78954..00000000
--- a/src/frontend/src/styles/icons.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@import '@fontsource/material-icons-outlined';
-
-.material-icons,
-.material-symbols {
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: 'liga';
-}
-
-.material-icons {
-  font-family: 'Material Icons Outlined';
-}
-
-.material-symbols {
-  font-family: 'Material Symbols Outlined Variable';
-}
diff --git a/src/frontend/src/styles/index.css b/src/frontend/src/styles/index.css
index 6b9a5d72..ed758e84 100644
--- a/src/frontend/src/styles/index.css
+++ b/src/frontend/src/styles/index.css
@@ -1,5 +1,4 @@
 @import './livekit.css';
-@import './icons.css';
 @layer reset, base, tokens, recipes, utilities;
 html,
 body,