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-motionby 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. Withtrigger="manual"nothing happens until you callplay()yourself, and withtrigger="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 hasdefaultanddrawis 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 (bell → bell-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.