[docs] Fix two tone icon dark mode color (mui#39868)

mnajdova · Nov 14, 2023 · 7173292 · 7173292
1 parent e049e1b
commit 7173292
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/docs/data/material/components/icons/TwoToneIcons.js b/docs/data/material/components/icons/TwoToneIcons.js
@@ -1,6 +1,21 @@
 import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
 
+const useIsDarkMode = () => {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+};
+
 export default function TwoToneIcons() {
-  return <Icon baseClassName="material-icons-two-tone">add_circle</Icon>;
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <Icon
+      sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
+      baseClassName="material-icons-two-tone"
+    >
+      add_circle
+    </Icon>
+  );
 }
diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx b/docs/data/material/components/icons/TwoToneIcons.tsx
@@ -1,6 +1,21 @@
 import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
 import Icon from '@mui/material/Icon';
 
+const useIsDarkMode = () => {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+};
+
 export default function TwoToneIcons() {
-  return <Icon baseClassName="material-icons-two-tone">add_circle</Icon>;
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <Icon
+      sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
+      baseClassName="material-icons-two-tone"
+    >
+      add_circle
+    </Icon>
+  );
 }
diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx.preview b/docs/data/material/components/icons/TwoToneIcons.tsx.preview
@@ -1 +1,6 @@
-<Icon baseClassName="material-icons-two-tone">add_circle</Icon>
+<Icon
+  sx={{ ...(isDarkMode && { filter: 'invert(1)' }) }}
+  baseClassName="material-icons-two-tone"
+>
+  add_circle
+</Icon>