diff --git a/demo/src/app.jsx b/demo/src/app.jsx
index f4100148..549663cf 100644
--- a/demo/src/app.jsx
+++ b/demo/src/app.jsx
@@ -103,6 +103,7 @@ import {
     networkModificationsFr,
     logout,
     equipmentStyles,
+    LeftPanelOpenIcon,
 } from '../../src';
 
 const messages = {
@@ -612,6 +613,7 @@ function AppContent({ language, onLanguageClick }) {
             <hr />
             <hr />
             {testIcons()}
+            <LeftPanelOpenIcon fontSize="large" color="secondary" />
             <hr />
 
             <PermanentSnackButton />
diff --git a/src/components/icons/LeftPanelOpenIcon.tsx b/src/components/icons/LeftPanelOpenIcon.tsx
index 69a36566..a0e7ea17 100644
--- a/src/components/icons/LeftPanelOpenIcon.tsx
+++ b/src/components/icons/LeftPanelOpenIcon.tsx
@@ -6,18 +6,8 @@
  */
 
 import LeftPanelOpen from '@material-symbols/svg-400/outlined/left_panel_open.svg?react';
-import { useTheme } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export function LeftPanelOpenIcon() {
-    const theme = useTheme();
-
-    return (
-        <LeftPanelOpen
-            style={{
-                width: 24,
-                height: 24,
-                fill: theme.palette.text.primary,
-            }}
-        />
-    );
+export function LeftPanelOpenIcon(props: SvgIconProps) {
+    return <SvgIcon component={LeftPanelOpen} inheritViewBox {...props} />;
 }