From ce6ab7060e20b26b74587b7e1ac2de5f17e0ee1e Mon Sep 17 00:00:00 2001 From: ppazosp Date: Sun, 29 Mar 2026 23:20:06 +0200 Subject: [PATCH] fix[react]: fix icon rendering in basic catalog (fixes #946) Add camelCase to snake_case conversion for Material Symbols icon names. The A2UI spec uses camelCase names (e.g., skipPrevious, shoppingCart) but Material Symbols Outlined requires snake_case (skip_previous, shopping_cart). This matches the approach used in the Angular renderer and React v0_8 renderer. --- .../react/src/v0_9/catalog/basic/components/Icon.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/renderers/react/src/v0_9/catalog/basic/components/Icon.tsx b/renderers/react/src/v0_9/catalog/basic/components/Icon.tsx index 86b69ba74..f6accdd13 100644 --- a/renderers/react/src/v0_9/catalog/basic/components/Icon.tsx +++ b/renderers/react/src/v0_9/catalog/basic/components/Icon.tsx @@ -19,9 +19,18 @@ import {createReactComponent} from '../../../adapter'; import {IconApi} from '@a2ui/web_core/v0_9/basic_catalog'; import {getBaseLeafStyle} from '../utils'; +/** + * Convert camelCase to snake_case for Material Symbols font. + * e.g., "shoppingCart" -> "shopping_cart", "skipPrevious" -> "skip_previous" + */ +function toSnakeCase(str: string): string { + return str.replace(/([A-Z])/g, '_$1').toLowerCase(); +} + export const Icon = createReactComponent(IconApi, ({props}) => { - const iconName = + const rawName = typeof props.name === 'string' ? props.name : (props.name as {path?: string})?.path; + const iconName = rawName ? toSnakeCase(rawName) : undefined; const style: React.CSSProperties = { ...getBaseLeafStyle(), fontSize: '24px',