Angular Migration

Try the codemod first

The V2 codemod can rename deterministic Angular imports and selectors in inline or resolvable external templates. It reports templates and API changes it cannot safely infer, which you should complete with this guide.

Standalone components

v2 components are standalone. They were already standalone before v2. No module removal needed.

Component names

v2 uses Solar-prefixed PascalCase imports with style suffixes. Before v2, icons used style-suffixed names without prefix.

Before (pre-v2):

import { HeartBold } from '@solar-icons/angular'

After (v2):

import { SolarHeartBold } from '@solar-icons/angular'

SolarProvider

v2 adds <solar-provider> for sharing styling via CSS custom properties:

import { SolarProvider, SolarHomeBold } from '@solar-icons/angular'

@Component({
    standalone: true,
    imports: [SolarProvider, SolarHomeBold],
    template: `
        <solar-provider color="#3b82f6" [size]="24" [strokeWidth]="1.5">
            <svg solarHomeBold></svg>
        </solar-provider>
    `,
})
export class AppComponent {}

useSolar

Child-driven API for components inside <solar-provider>:

import { useSolar } from '@solar-icons/angular'

function MyComponent() {
    const solar = useSolar()
    solar.setColor('#ef4444')
}

Set defaults with <solar-provider> props. In child components, read from useSolar() and write to it only in response to user events. Initial writes in a child constructor are overridden by the provider's inputs. Avoid them.

Duotone and stroke width

v2 adds duotone support and stroke width control for linear styles:

<svg solarHeartBoldDuotone secondaryColor="#f59e0b" [secondaryOpacity]="0.4" />
<svg solarSettingsLinear [strokeWidth]="2" />

Additional inputs

v2 icons accept additional inputs:

Input	Type	Description
`strokeWidth`	`string \| number`	Stroke width (linear styles only)
`secondaryColor`	`string`	Duotone accent color
`secondaryOpacity`	`number`	Duotone accent opacity
`isolated`	`boolean`	Ignores provider CSS variables
`alt`	`string`	Accessibility label
`ariaLabel`	`string`	`aria-label` attribute
`titleAttr`	`string`	Explicit `<title>` text

Before v2, only size, color, alt, and mirrored were available.

Dynamic rendering (pre-v2)

The old SolarDynamicIcon directive + provideSolarIcons registry is still available, renamed to SolarIcon. Works identically. Register icons by name, then render by string or class reference.

import { SolarIcon, provideSolarIcons } from '@solar-icons/angular'
import { SolarHeartBold } from '@solar-icons/angular'

@Component({
    standalone: true,
    imports: [SolarIcon],
    template: '<ng-container solarIcon="SolarHeartBold" [size]="24" />',
    providers: [provideSolarIcons({ SolarHeartBold })],
})
export class AppComponent {}

Multi-style dynamic components

v2 adds multi-style components that bundle all 6 styles in one component and switch via weight input.

Import from the new @solar-icons/angular/dynamic entry point:

import { SolarHome } from '@solar-icons/angular/dynamic'

Use them directly in the template:

<svg solarHome weight="Bold" [size]="24" color="#ef4444" />

These components are independent of SolarIcon. No directive, no registry, no provider needed.

Which to choose

Need	Solution
One style, one file, minimal bundle	Static component (`SolarHomeBold`)
Switch styles at runtime on a known icon	Multi-style component (`SolarHome` from `./dynamic`)
Icons from API / CMS / user config	`SolarIcon` directive + `provideSolarIcons`

CSS classes

v2 adds a base CSS class solar plus a per-icon variant solar-{kebab}-{style} on every icon:

<svg solarHomeBold></svg>
<!-- renders with: class="solar solar-home-bold" -->

Before v2, icons had no CSS classes.

On this page