Version-aware icons page, add Material Symbols class for v0.9

- Icons page renders with correct renderer based on spec version toggle
- Add .material-symbols-outlined CSS class in globals.css — the v0.9
  Icon component uses this class but Google Fonts only provides
  @font-face rules, not the class definition
- Includes overflow: hidden to prevent icon name text from overflowing
  during font load

Author: lukasmoschitz

tools/composer/src/app/globals.css

@@ -223,6 +223,25 @@
   --s-0: #000000;
 }
 
+/* Material Symbols class for v0.9 renderer.
+ * The v0.9 Icon component uses className="material-symbols-outlined"
+ * but Google Fonts only defines @font-face rules, not the CSS class. */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+
 /* Monaco editor - use background highlight instead of border */
 .monaco-editor .current-line,
 .monaco-editor .view-overlays .current-line {

tools/composer/src/app/icons/page.tsx

@@ -20,6 +20,8 @@ import { useState } from 'react';
 import { cn } from '@/lib/utils';
 import { ExternalLink, Copy, Check } from 'lucide-react';
 import { A2UIViewer } from '@/lib/a2ui';
+import { useSpecVersion } from '@/contexts/spec-version-context';
+import type { A2UIComponent, SpecVersion } from '@/types/widget';
 
 // 100 most important Material Icons for common UI patterns
 const MATERIAL_ICONS = [
@@ -66,7 +68,14 @@ const MATERIAL_ICONS = [
   'dashboard', 'list', 'view_list', 'grid_view', 'table_chart', 'bar_chart',
 ];
 
-function IconCard({ name, isSelected, onClick }: { name: string; isSelected: boolean; onClick: () => void }) {
+function iconComponent(name: string, specVersion: SpecVersion): A2UIComponent[] {
+  if (specVersion === '0.9') {
+    return [{ id: 'icon', component: 'Icon', name }];
+  }
+  return [{ id: 'icon', component: { Icon: { name: { literalString: name } } } }];
+}
+
+function IconCard({ name, isSelected, onClick, specVersion }: { name: string; isSelected: boolean; onClick: () => void; specVersion: SpecVersion }) {
   return (
     <button
       onClick={onClick}
@@ -80,16 +89,8 @@ function IconCard({ name, isSelected, onClick }: { name: string; isSelected: boo
       <div className="flex h-12 w-12 items-center justify-center scale-[2]">
         <A2UIViewer
           root="icon"
-          components={[
-            {
-              id: 'icon',
-              component: {
-                Icon: {
-                  name: { literalString: name },
-                },
-              },
-            },
-          ]}
+          components={iconComponent(name, specVersion)}
+          specVersion={specVersion}
         />
       </div>
       <span className="text-xs text-muted-foreground truncate w-full text-center">
@@ -100,6 +101,7 @@ function IconCard({ name, isSelected, onClick }: { name: string; isSelected: boo
 }
 
 export default function IconsPage() {
+  const { specVersion } = useSpecVersion();
   const [selectedIcon, setSelectedIcon] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
 
@@ -156,6 +158,7 @@ export default function IconsPage() {
             name={name}
             isSelected={selectedIcon === name}
             onClick={() => setSelectedIcon(name)}
+            specVersion={specVersion}
           />
         ))}
       </div>