Solución de problemas

Q: El icono se pinta pero no anima

En orden de con qué frecuencia resulta ser cada una: El sistema pide movimiento reducido. Los iconos respetan prefers-reduced-motion por defecto y se quedan en su pose base. Es el comportamiento previsto — revisa el ajuste de tu sistema antes que nada. El disparador nunca ocurre. El default es hover. Con trigger="manual" no pasa nada hasta que llames a play(), y con trigger="group" la animación cuelga del hover de un ancestro, no del icono. Esa variante no existe en ese icono. Pedir animation="spin" en un icono que solo tiene default y draw no hace nada, y no es un error. Cada icono del catálogo lista sus variantes.

Q: name= no pinta nada

El catálogo es opt-in. Sin provideIconCatalog(ANIMATED_ICONS) en tus providers, name="bell" no tiene dónde buscar y el componente se pinta vacío — a propósito, porque registrar 1767 iconos por defecto metería el catálogo entero en todos los bundles. O agregas el provider, o pasas el icono por valor con [iconDef].

Q: El render en servidor falla o no hidrata

No hay nada que configurar — ni afterNextRender, ni guarda de isPlatformBrowser, ni import diferido. Si tu build falla al renderizar, la causa casi nunca es el icono: el componente no toca ningún global del navegador en el servidor, y eso se verifica en CI en cada commit con una prueba de humo que corre en Node de verdad, no en jsdom. El SVG que pinta el servidor es exactamente el mismo nodo que anima el cliente — nunca se reemplaza, las animaciones solo se añaden encima. Si ves un parpadeo, busca otra cosa que esté cambiando el DOM.

Cuatro cosas que parecen fallos y normalmente no lo son.

El icono se pinta pero no anima

En orden de con qué frecuencia resulta ser cada una:

El sistema pide movimiento reducido. Los iconos respetan prefers-reduced-motion por defecto y se quedan en su pose base. Es el comportamiento previsto — revisa el ajuste de tu sistema antes que nada.
El disparador nunca ocurre. El default es hover. Con trigger="manual" no pasa nada hasta que llames a play(), y con trigger="group" la animación cuelga del hover de un ancestro, no del icono.
Esa variante no existe en ese icono. Pedir animation="spin" en un icono que solo tiene default y draw no hace nada, y no es un error. Cada icono del catálogo lista sus variantes.

El morph se ve raro

El morphing empareja subtrazos por proximidad. Cuando dos iconos no comparten nada estructural —un círculo y una campana, por ejemplo— no hay buen emparejamiento que encontrar, y el resultado es honesto al respecto: las formas viajan por el lienzo de maneras que nadie diseñó. Es un límite de la interpolación de formas, no un defecto.

Lo que ayuda: morphear entre iconos de la misma familia (bell → bell-ring), o entre formas con el mismo número de subtrazos. El Lab te deja probar cualquier pareja antes de comprometerte con ella.

<code>name=</code> no pinta nada

El catálogo es opt-in. Sin provideIconCatalog(ANIMATED_ICONS) en tus providers, name="bell" no tiene dónde buscar y el componente se pinta vacío — a propósito, porque registrar 1767 iconos por defecto metería el catálogo entero en todos los bundles. O agregas el provider, o pasas el icono por valor con [iconDef].

El render en servidor falla o no hidrata

No hay nada que configurar — ni afterNextRender, ni guarda de isPlatformBrowser, ni import diferido. Si tu build falla al renderizar, la causa casi nunca es el icono: el componente no toca ningún global del navegador en el servidor, y eso se verifica en CI en cada commit con una prueba de humo que corre en Node de verdad, no en jsdom.

El SVG que pinta el servidor es exactamente el mismo nodo que anima el cliente — nunca se reemplaza, las animaciones solo se añaden encima. Si ves un parpadeo, busca otra cosa que esté cambiando el DOM.