Rename Icon path property to svgPath to fix type collision (#1347)

The Icon component's name property accepted either a string (for standard icons) or an object with a path property (for custom SVG paths)

However, the Angular renderer uses a utility type to resolve properties that strips away shapes matching DataBindingType (which is defined as { path: string }). Because of this structural match, the { path: string } branch was being incorrectly excluded from the resolved type, leaving only the string enum and forcing developers to use as any casts when dealing with custom SVG paths.

This PR renames the property inside the object from path to svgPath. This breaks the structural match with DataBindingType and preserves the type in the union, allowing for proper type inference without forced casts.

Author: josemontespg

renderers/angular/CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Unreleased
 
+- **BREAKING CHANGE**: (v0_9) Rename Icon `path` property to `svgPath` to fix type collision and avoid forced casts.
 - (v0_9) Re-style the v0_9 catalog components using the default theme from
   `web_core`. [#1166](https://github.com/google/A2UI/pull/1166)
 - (v0_9) Improve type safety of `props()` in Catalog components. Custom catalog

renderers/angular/src/v0_9/catalog/basic/icon.component.ts

@@ -42,9 +42,9 @@ const ICON_NAME_OVERRIDES: Record<string, string> = {
   standalone: true,
   imports: [],
   template: `
-    @if (isPath()) {
+    @if (isSvgPath()) {
       <svg class="a2ui-icon svg" viewBox="0 0 24 24" [style.fill]="color() || 'currentColor'">
-        <path [attr.d]="path()"></path>
+        <path [attr.d]="svgPath()"></path>
       </svg>
     } @else {
       <i class="material-icons a2ui-icon" [style.color]="color()">
@@ -88,14 +88,17 @@ export class IconComponent extends BasicCatalogComponent<typeof IconApi> {
   readonly color = computed(() => (this.props() as AnyDuringSchemaAlignment)['color']?.value());
   readonly iconNameRaw = computed(() => this.props()['name']?.value());
 
-  readonly isPath = computed(() => {
+  readonly isSvgPath = computed(() => {
     const name = this.iconNameRaw();
-    return typeof name === 'object' && name !== null && 'path' in name;
+    return typeof name === 'object' && name !== null && 'svgPath' in name;
   });
 
-  readonly path = computed(() => {
+  readonly svgPath = computed(() => {
     const name = this.iconNameRaw();
-    return (name as any)?.path || '';
+    if (typeof name === 'object' && name !== null && 'svgPath' in name) {
+      return name.svgPath;
+    }
+    return '';
   });
 
   readonly iconName = computed(() => {

renderers/angular/src/v0_9/catalog/basic/simple-components.spec.ts

@@ -284,7 +284,7 @@ describe('Simple Components', () => {
       setComponentProps(fixture, {
         ...defaultProps,
         name: createBoundProperty({
-          path: 'M10 10...',
+          svgPath: 'M10 10...',
         }) as unknown as ComponentToProps<IconComponent>['name'],
       });
       fixture.detectChanges();

renderers/lit/CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Unreleased
 
+- **BREAKING CHANGE**: (v0_9) Rename Icon `path` property to `svgPath` and update component to correctly render SVG elements.
 - (v0_9) Wire up agent-provided primary color to basic catalog components.
 - (v0_9) Re-style the v0_9 catalog components using the default theme from
   `web_core`. [#1079](https://github.com/google/A2UI/pull/1079)

renderers/lit/src/v0_9/catalogs/basic/components/Icon.ts

@@ -64,6 +64,11 @@ export class A2uiIconElement extends BasicCatalogA2uiLitElement<typeof IconApi>
       color: var(--a2ui-icon-color, inherit);
       font-variation-settings: var(--a2ui-icon-font-variation-settings, 'FILL' 1);
     }
+    .svg {
+      fill: currentColor;
+      width: var(--_icon-size);
+      height: var(--_icon-size);
+    }
   `;
 
   protected createController() {
@@ -74,8 +79,15 @@ export class A2uiIconElement extends BasicCatalogA2uiLitElement<typeof IconApi>
     const props = this.controller.props;
     if (!props) return nothing;
 
-    const iconName =
-      typeof props.name === 'string' ? toMaterialSymbol(props.name) : (props.name as any)?.path;
+    const name = props.name;
+    const isPath = typeof name === 'object' && name !== null && 'svgPath' in name;
+
+    if (isPath) {
+      const path = (name as {svgPath: string}).svgPath;
+      return html`<svg class="svg" viewBox="0 0 24 24"><path d=${path}></path></svg>`;
+    }
+
+    const iconName = typeof name === 'string' ? toMaterialSymbol(name) : '';
     return html`<span class="material-symbol">${iconName}</span>`;
   }
 }

renderers/react/CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Unreleased
 
+- **BREAKING CHANGE**: (v0_9) Rename Icon `path` property to `svgPath` and update component to correctly render SVG elements.
 - Added license.
 - (v0_8) Exclude SVG elements and descendants from CSS reset to restore SVG rendering. [#1252](https://github.com/google/A2UI/pull/1252)
 - **BREAKING CHANGE**: Renamed `createReactComponent` to `createComponentImplementation`.

renderers/react/src/v0_9/catalog/basic/components/Icon.tsx

@@ -36,29 +36,51 @@ function toMaterialSymbol(str: string): string {
 
 export const Icon = createComponentImplementation(IconApi, ({props}) => {
   useBasicCatalogStyles();
-  const iconName =
-    typeof props.name === 'string'
-      ? toMaterialSymbol(props.name)
-      : (props.name as {path?: string})?.path;
 
-  const style: React.CSSProperties = {
+  const isPath = typeof props.name === 'object' && props.name !== null && 'svgPath' in props.name;
+
+  const baseStyle: React.CSSProperties = {
     ...getBaseLeafStyle(),
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    fontFamily: 'var(--a2ui-icon-font-family, "Material Symbols Outlined", sans-serif)',
     fontSize: 'var(--a2ui-icon-size, var(--a2ui-font-size-xl, 24px))',
     color: 'var(--a2ui-icon-color, inherit)',
+    lineHeight: 1,
+  };
+
+  if (isPath) {
+    const path = (props.name as {svgPath: string}).svgPath;
+    return (
+      <svg
+        className="a2ui-icon svg"
+        viewBox="0 0 24 24"
+        style={{
+          ...baseStyle,
+          fill: 'currentColor',
+          width: 'var(--a2ui-icon-size, 24px)',
+          height: 'var(--a2ui-icon-size, 24px)',
+        }}
+      >
+        <path d={path}></path>
+      </svg>
+    );
+  }
+
+  const iconName = typeof props.name === 'string' ? toMaterialSymbol(props.name) : '';
+
+  const fontStyle: React.CSSProperties = {
+    ...baseStyle,
+    fontFamily: 'var(--a2ui-icon-font-family, "Material Symbols Outlined", sans-serif)',
     fontVariationSettings: 'var(--a2ui-icon-font-variation-settings, "FILL" 1)',
     fontWeight: 'normal',
     fontStyle: 'normal',
-    lineHeight: 1,
     letterSpacing: 'normal',
     textTransform: 'none',
   };
 
   return (
-    <span className="material-symbols-outlined" style={style}>
+    <span className="material-symbols-outlined" style={fontStyle}>
       {iconName}
     </span>
   );

renderers/web_core/CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Unreleased
 
+- **BREAKING CHANGE**: Rename Icon `path` property to `svgPath` to fix type collision with `DataBindingType`.
 - (v0_9) Add `computeColorVariant` helper function for basic catalog components to generate CSS formulas for color variants (light, dark, hover), allowing reuse across renderers.
 
 ## 0.9.1

renderers/web_core/src/v0_9/basic_catalog/components/basic_components.ts

@@ -150,6 +150,11 @@ export const IconApi = {
       name: z
         .union([
           z.enum(ICON_NAMES),
+          z
+            .object({
+              svgPath: z.string().describe('Custom SVG path data'),
+            })
+            .strict(),
           z
             .object({
               path: z.string(),

specification/v0_9/json/basic_catalog.json

@@ -162,12 +162,15 @@
                 {
                   "type": "object",
                   "properties": {
-                    "path": {
+                    "svgPath": {
                       "type": "string"
                     }
                   },
-                  "required": ["path"],
+                  "required": ["svgPath"],
                   "additionalProperties": false
+                },
+                {
+                  "$ref": "common_types.json#/$defs/DataBinding"
                 }
               ]
             }