Four things that look like bugs and usually are not.

The icon renders but never animates

In order of how often it turns out to be each one:

  • The system asks for reduced motion. Icons respect prefers-reduced-motion by default and stay on their base pose. That is the intended behaviour — check your OS setting before anything else.
  • The trigger never fires. The default is hover. With trigger="manual" nothing happens until you call play() yourself, and with trigger="group" the animation hangs off an ancestor being hovered, not the icon.
  • The variant does not exist on that icon. Asking for animation="spin" on an icon that only has default and draw is a no-op, not an error. Every icon in the catalog lists its variants.

The morph looks wrong

Morphing pairs subpaths by proximity. When two icons share nothing structural — a circle and a bell, say — there is no good pairing to find, and the result is honest about it: shapes travel across the canvas in ways nobody designed. This is a limit of shape interpolation, not a defect.

What helps: morph between icons of the same family (bellbell-ring), or between shapes with the same number of subpaths. The Lab lets you try any pair before you commit to it.

<code>name=</code> renders nothing

The catalog is opt-in. Without provideIconCatalog(ANIMATED_ICONS) in your providers, name="bell" has nothing to look up and the component renders empty — deliberately, because registering 1767 icons by default would put the entire catalog in every bundle. Either add the provider, or pass the icon by value with [iconDef].

Server rendering fails or does not hydrate

There is nothing to configure — no afterNextRender, no isPlatformBrowser guard, no deferred import. If your build fails at render time, the cause is almost never the icon: the component touches no browser global on the server, and that is verified in CI on every commit with a smoke test that runs in real Node, not jsdom.

The SVG the server paints is the exact same node the client animates — it is never replaced, animations are just added on top. If you see a flash, look for something else swapping the DOM.