Support Icons

chartlets.js/CHANGES.md

@@ -1,5 +1,8 @@
 ## Version 0.1.8 (in development)
 
+* Added icon support for `Button`, `IconButton` and `Tabs` components.
+ (#124).
+
 ## Version 0.1.7 (from 2025/12/03)
 
 * Updated dependencies

chartlets.js/packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets-demo",
-  "version": "0.1.8.dev0",
+  "version": "0.1.8-dev.0",
   "description": "Demonstrator for the Chartlets framework.",
   "type": "module",
   "files": [
@@ -30,7 +30,8 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/material": "^6.1.5",
+    "@mui/icons-material": "^6.2.1",
+    "@mui/material": "^6.2.1",
     "chartlets": "file:../lib",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

chartlets.js/packages/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets",
-  "version": "0.1.8.dev0",
+  "version": "0.1.8-dev.0",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [
@@ -61,6 +61,7 @@
     "zustand": "^5.0"
   },
   "peerDependencies": {
+    "@mui/icons-material": "^6.2.1",
     "@mui/material": "^6.2.1",
     "@mui/x-data-grid": ">=7",
     "react": "^18.3.1",

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/CHANGES.md

@@ -1,5 +1,8 @@
 ## Version 0.1.8 (in development)
 
+* Added `size` and removed `variant` property from `IconButton`
+  component to align with component in chartlets.js. (#124)
+
 ## Version 0.1.7 (from 2025/12/03)
 
 * Updated dependencies

chartlets.py/chartlets/components/button.py

@@ -24,7 +24,7 @@ class Button(Component):
     """
 
     variant: str | None = None
-    """The button variant. 
+    """The button variant.
     One "contained" | "outlined" | "text". Defaults to "text".
     """
 
@@ -49,10 +49,10 @@ class IconButton(Component):
     "info" | "warning". Defaults to "primary".
     """
 
-    variant: str | None = None
-    """The button variant. 
-    One "contained" | "outlined" | "text". Defaults to "text".
-    """
-
     tooltip: str | None = None
     """Tooltip title. Optional."""
+
+    size: str | None = None
+    """The button size.
+    One of "small" | "medium" | "large". Defaults to "medium".
+    """

chartlets.py/demo/my_extension/my_panel_5.py

@@ -12,7 +12,13 @@
 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",
+        variant="outlined",
+        color="warning",
+    )
     okay_button = Button(id="okay_button", text="Okay")
     not_okay_button = Button(id="not_okay_button", text="Not okay")
     dialog = Dialog(