set fontFamily for MuiIcons

Author: clarasb

chartlets.js/package-lock.json

@@ -30,7 +30,6 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.2.1",
     "@mui/material": "^6.2.1",
     "chartlets": "file:../lib",
     "react": "^18.3.1",
@@ -46,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/package.json

@@ -3,6 +3,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/demo/src/main.tsx

@@ -61,7 +61,6 @@
     "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/package.json

@@ -55,8 +55,8 @@ export function Button({
         variant={variant}
         color={color}
         disabled={disabled}
-        startIcon={startIcon && <Icon iconName={startIcon}></Icon>}
-        endIcon={endIcon && <Icon iconName={endIcon}></Icon>}
+        startIcon={startIcon && <Icon iconName={startIcon} />}
+        endIcon={endIcon && <Icon iconName={endIcon} />}
         onClick={handleClick}
       >
         {text}

chartlets.js/packages/lib/src/plugins/mui/Button.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.test.tsx

@@ -1,4 +1,10 @@
-import * as MuiIcons from "@mui/icons-material";
+/*
+ * 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;
@@ -7,14 +13,15 @@ interface IconProps {
 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 />;
+  return (
+    <MuiIcon
+      sx={{
+        fontFamily: "Material Icons",
+        textTransform: "none",
+        lineHeight: 1,
+      }}
+    >
+      {iconName}
+    </MuiIcon>
+  );
 };

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

@@ -53,7 +53,7 @@ export function IconButton({
         disabled={disabled}
         onClick={handleClick}
       >
-        <Icon iconName={icon}></Icon>
+        <Icon iconName={icon} />
       </MuiIconButton>
     </Tooltip>
   );

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

@@ -56,8 +56,7 @@ export function Tabs({
                 key={index}
                 label={tabState ? tabState.label : isString(tab) ? tab : ""}
                 icon={
-                  tabState &&
-                  tabState.icon && <Icon iconName={tabState.icon}></Icon>
+                  tabState && tabState.icon && <Icon iconName={tabState.icon} />
                 }
                 disabled={disabled || (tabState && tabState.disabled)}
               />

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

@@ -15,7 +15,7 @@ def render_panel(
     open_button = Button(
         id="open_button",
         text="Open Dialog",
-        startIcon="ChatBubble",
+        startIcon="chat_bubble",
         variant="outlined",
         color="warning",
     )