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,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/material": "^6.1.5",
+    "@mui/material": "^6.2.1",
     "chartlets": "file:../lib",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -45,6 +45,7 @@
     "@eslint/compat": "^1.4.0",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.38.0",
+    "@fontsource/material-icons": "^5.1.1",
     "@types/node": "^20.11.17",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",

chartlets.js/packages/demo/src/main.tsx

@@ -9,6 +9,7 @@ import ReactDOM from "react-dom/client";
 
 import App from "./App";
 
+import "@fontsource/material-icons";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

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": [

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

@@ -6,10 +6,10 @@
 
 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;
@@ -61,8 +61,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} />}
+        endIcon={endIcon && <Icon iconName={endIcon} />}
         onClick={handleClick}
       >
         {text}

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

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2019-2026 by Brockmann Consult Development team
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Icon } from "./Icon";
+
+describe("Icon", () => {
+  it("should render nothing if iconName is not given", () => {
+    const { container } = render(<Icon />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render the iconName", () => {
+    render(<Icon iconName="sunny" />);
+    expect(screen.getByText("sunny")).not.toBeUndefined();
+  });
+
+  it("should render a MUI Icon root element", () => {
+    render(<Icon iconName="home" />);
+
+    const icon = screen.getByText("home");
+    // MUI Icon renders as a <span> with MuiIcon-root class in default configuration
+    expect(icon.tagName.toLowerCase()).toEqual("span");
+    expect(icon.className).toContain("MuiIcon-root");
+  });
+});

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2019-2026 by Brockmann Consult Development team
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import MuiIcon from "@mui/material/Icon";
+
+interface IconProps {
+  iconName?: string;
+}
+
+export const Icon = ({ iconName }: IconProps) => {
+  if (!iconName) return null;
+
+  return (
+    <MuiIcon
+      sx={{
+        fontFamily: "Material Icons",
+        textTransform: "none",
+        lineHeight: 1,
+      }}
+    >
+      {iconName}
+    </MuiIcon>
+  );
+};

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

@@ -6,9 +6,9 @@
 
 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 {
@@ -59,7 +59,7 @@ export function IconButton({
         disabled={disabled}
         onClick={handleClick}
       >
-        <MuiIcon>{icon}</MuiIcon>
+        <Icon iconName={icon} />
       </MuiIconButton>
     </Tooltip>
   );

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

@@ -5,13 +5,13 @@
  */
 
 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";
 
@@ -62,8 +62,7 @@ export function Tabs({
                 key={index}
                 label={tabState ? tabState.label : isString(tab) ? tab : ""}
                 icon={
-                  tabState &&
-                  tabState.icon && <MuiIcon>{tabState.icon}</MuiIcon>
+                  tabState && tabState.icon && <Icon iconName={tabState.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

@@ -28,7 +28,7 @@ class Button(Component):
     """
 
     variant: str | None = None
-    """The button variant. 
+    """The button variant.
     One "contained" | "outlined" | "text". Defaults to "text".
     """
 
@@ -53,10 +53,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

@@ -16,7 +16,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="chat_bubble",
+        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(