add Icon component and use it in Button, IconButton and Tabs

Author: clarasb

chartlets.js/packages/lib/src/plugins/mui/Button.tsx

@@ -1,9 +1,9 @@
 import { type MouseEvent } from "react";
 import MuiButton from "@mui/material/Button";
-import MuiIcon from "@mui/material/Icon";
 
 import type { ComponentProps, ComponentState } from "@/index";
 import { Tooltip } from "./Tooltip";
+import { Icon } from "./Icon";
 
 interface ButtonState extends ComponentState {
   text?: string;
@@ -55,8 +55,8 @@ export function Button({
         variant={variant}
         color={color}
         disabled={disabled}
-        startIcon={startIcon && <MuiIcon>{startIcon}</MuiIcon>}
-        endIcon={endIcon && <MuiIcon>{endIcon}</MuiIcon>}
+        startIcon={startIcon && <Icon iconName={startIcon}></Icon>}
+        endIcon={endIcon && <Icon iconName={endIcon}></Icon>}
         onClick={handleClick}
       >
         {text}

chartlets.js/packages/lib/src/plugins/mui/Icon.tsx

@@ -0,0 +1,20 @@
+import * as MuiIcons from "@mui/icons-material";
+
+interface IconProps {
+  iconName?: string;
+}
+
+export const Icon = ({ iconName }: IconProps) => {
+  if (!iconName) return null;
+
+  const IconComponent = (MuiIcons as Record<string, React.ElementType>)[
+    iconName
+  ];
+
+  if (!IconComponent) {
+    console.warn(`Icon "${iconName}" not found in @mui/icons-material`);
+    return null;
+  }
+
+  return <IconComponent />;
+};

chartlets.js/packages/lib/src/plugins/mui/IconButton.tsx

@@ -1,8 +1,8 @@
 import { type MouseEvent } from "react";
 import MuiIconButton from "@mui/material/IconButton";
-import MuiIcon from "@mui/material/Icon";
 
 import type { ComponentState, ComponentProps } from "@/index";
+import { Icon } from "./Icon";
 import { Tooltip } from "./Tooltip";
 
 interface IconButtonState extends ComponentState {
@@ -53,7 +53,7 @@ export function IconButton({
         disabled={disabled}
         onClick={handleClick}
       >
-        <MuiIcon>{icon}</MuiIcon>
+        <Icon iconName={icon}></Icon>
       </MuiIconButton>
     </Tooltip>
   );

chartlets.js/packages/lib/src/plugins/mui/Tabs.tsx

@@ -1,11 +1,11 @@
 import MuiBox from "@mui/material/Box";
-import MuiIcon from "@mui/material/Icon";
 import MuiTabs from "@mui/material/Tabs";
 import MuiTab from "@mui/material/Tab";
 
 import type { ComponentProps, ComponentState } from "@/index";
 import type { SyntheticEvent } from "react";
 import { Box } from "@/plugins/mui/Box";
+import { Icon } from "./Icon";
 import { isString } from "@/utils/isString";
 import { isComponentState } from "@/types/state/component";
 
@@ -57,7 +57,7 @@ export function Tabs({
                 label={tabState ? tabState.label : isString(tab) ? tab : ""}
                 icon={
                   tabState &&
-                  tabState.icon && <MuiIcon>{tabState.icon}</MuiIcon>
+                  tabState.icon && <Icon iconName={tabState.icon}></Icon>
                 }
                 disabled={disabled || (tabState && tabState.disabled)}
               />

chartlets.py/demo/my_extension/my_panel_5.py

@@ -12,7 +12,7 @@
 def render_panel(
     ctx: Context,
 ) -> Component:
-    open_button = Button(id="open_button", text="Open Dialog")
+    open_button = Button(id="open_button", text="Open Dialog", startIcon="ChatBubble")
     okay_button = Button(id="okay_button", text="Okay")
     not_okay_button = Button(id="not_okay_button", text="Not okay")
     dialog = Dialog(