Hackery with Tabs

Author: ggdouglas

packages/core/src/components/tabs/tabTitle.tsx

@@ -15,6 +15,7 @@
  */
 
 import classNames from "classnames";
+import * as React from "react";
 
 import { AbstractPureComponent, Classes, Intent } from "../../common";
 import { DISPLAYNAME_PREFIX, removeNonHTMLProps } from "../../common/props";
@@ -72,7 +73,14 @@ export class TabTitle extends AbstractPureComponent<TabTitleProps> {
                 role="tab"
                 tabIndex={disabled ? undefined : selected ? 0 : -1}
             >
-                {icon != null && <Icon icon={icon} intent={intent} className={Classes.TAB_ICON} />}
+                {icon != null && icon !== false &&
+                    (typeof icon === "string" ? (
+                        <Icon icon={icon} intent={intent} className={Classes.TAB_ICON} />
+                    ) : (
+                        React.cloneElement(icon as React.ReactElement, {
+                            className: classNames(Classes.TAB_ICON, (icon as React.ReactElement).props.className),
+                        })
+                    ))}
                 {title}
                 {children}
                 {tagContent != null && (

packages/demo-app/src/IconPlayground.tsx

@@ -6,12 +6,12 @@ import kebabCase from "lodash/kebabCase";
 import { useCallback, useEffect, useState } from "react";
 
 import { Classes, type IconName } from "@blueprintjs/core";
-import { SVGIconContainer } from "@blueprintjs/icons";
 import { Flex } from "@blueprintjs/labs";
 
 import { ButtonSection } from "./components/ButtonSection";
 import { CalloutSection } from "./components/CalloutSection";
 import { CompoundTagSection } from "./components/CompoundTagSection";
+import { CustomIcon, type CustomIconData } from "./components/CustomIcon";
 import { FontSection } from "./components/FontSection";
 import { IconPreview } from "./components/IconPreview";
 import { InputGroupSection } from "./components/InputGroupSection";
@@ -20,13 +20,6 @@ import { Navigation } from "./components/Navigation";
 import { TabsSection } from "./components/TabsSection";
 import { TagSection } from "./components/TagSection";
 
-interface CustomIconData {
-    isActive: boolean;
-    name: string;
-    originalViewBox: string;
-    paths: string[];
-}
-
 /**
  * Parse an SVG file and extract path data for rendering as a Blueprint icon
  */
@@ -110,18 +103,7 @@ export const IconPlayground = () => {
 
     // Compute the effective icon to use (custom or selected)
     const effectiveIcon: IconName | React.JSX.Element =
-        customIconData?.isActive === true ? (
-            <SVGIconContainer
-                iconName={customIconData.name as IconName}
-                svgProps={{ viewBox: customIconData.originalViewBox } as React.SVGAttributes<SVGElement>}
-            >
-                {customIconData.paths.map((d, i) => (
-                    <path d={d} fillRule="evenodd" key={i} />
-                ))}
-            </SVGIconContainer>
-        ) : (
-            selectedIcon
-        );
+        customIconData?.isActive === true ? <CustomIcon customIconData={customIconData} /> : selectedIcon;
 
     return (
         <div className={darkTheme ? Classes.DARK : ""}>

packages/demo-app/src/components/CustomIcon.tsx

@@ -0,0 +1,60 @@
+/* !
+ * (c) Copyright 2025 Palantir Technologies Inc. All rights reserved.
+ */
+
+import { forwardRef } from "react";
+
+import { type IconName, type IntentProps, type Props, removeNonHTMLProps } from "@blueprintjs/core";
+import { IconSize, SVGIconContainer, type SVGIconProps } from "@blueprintjs/icons";
+
+export interface CustomIconData {
+    isActive: boolean;
+    name: string;
+    originalViewBox: string;
+    paths: string[];
+}
+
+export type CustomIconProps<T extends Element = Element> = IntentProps &
+    Props &
+    SVGIconProps<T> & {
+        customIconData: CustomIconData;
+    };
+
+/**
+ * Custom icon component that wraps SVGIconContainer and properly forwards className
+ * to ensure it works correctly with Blueprint components like Button, Tab, MenuItem, etc.
+ */
+export const CustomIcon = forwardRef(<T extends Element>(props: CustomIconProps<T>, ref: React.Ref<T>) => {
+    const {
+        className,
+        color,
+        customIconData,
+        intent,
+        tagName = "span",
+        svgProps,
+        title,
+        htmlTitle,
+        ...htmlProps
+    } = props;
+
+    const size = props.size ?? IconSize.STANDARD;
+    const pathElements = customIconData.paths.map((d, i) => <path d={d} fillRule="evenodd" key={i} />);
+
+    return (
+        <SVGIconContainer<any>
+            children={pathElements}
+            className={className}
+            color={color}
+            htmlTitle={htmlTitle}
+            iconName={customIconData.name as IconName}
+            ref={ref}
+            size={size}
+            svgProps={{ ...svgProps, viewBox: customIconData.originalViewBox } as React.SVGAttributes<SVGElement>}
+            tagName={tagName}
+            title={title}
+            {...removeNonHTMLProps(htmlProps)}
+        />
+    );
+}) as any;
+
+CustomIcon.displayName = "CustomIcon";