Angular

SolarProvider, useSolar, CSS variables, duotone, and stroke width for Angular 17+.

npm install @solar-icons/angular

Standalone components with signal-based inputs. Solar-prefixed PascalCase component names with attribute selectors on <svg>.

Import patterns

// Top-level (all icons + lib)
import { SolarHeartBold, SolarProvider, useSolar } from '@solar-icons/angular'

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

Static components

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

@Component({
    standalone: true,
    imports: [SolarHeartBold],
    template: '<svg solarHeartBold color="#ef4444" [size]="32" />',
})
export class AppComponent {}

Duotone

<svg
    solarHeartBoldDuotone
    color="#3b82f6"
    secondaryColor="#f59e0b"
    [secondaryOpacity]="0.4"
    [size]="48" />

Stroke width

Linear, LineDuotone, and Broken styles support strokeWidth:

<svg solarSettingsLinear [strokeWidth]="2" [size]="24" />

SolarProvider

Wrap a subtree to share icon 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 {}

Input	CSS Variable	Fallback
`color`	`--solar-color`	`currentColor`
`size`	`--solar-size`	`24px`
`strokeWidth`	`--solar-stroke-width`	`1.5`
`secondaryColor`	`--solar-secondary-color`	`currentColor`
`secondaryOpacity`	`--solar-secondary-opacity`	`0.5`

The provider does not set defaults. Icons fall back to these values through CSS when no provider or input is specified.

useSolar

Call useSolar() inside a component that is a descendant of <solar-provider> to access the provider state. The provider must be an ancestor in the template, not a child.

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

const solar = useSolar()
solar.setColor('#ef4444')
solar.setSize(32)
solar.setSecondaryColor('#f59e0b')
solar.setSecondaryOpacity(0.4)

The component using useSolar() must be projected into <solar-provider> (the provider wraps it):

<solar-provider>
    <app-controls />
</solar-provider>

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.

Dynamic icons

Two complementary features share this name but solve different problems.

Multi-style components

Import a component that bundles all 6 styles and switches via weight. Use it directly in your template. No directive needed.

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

@Component({
    standalone: true,
    imports: [SolarHome],
    template: '<svg solarHome weight="Bold" [size]="24" color="#ef4444" />',
})
export class AppComponent {}

Available from @solar-icons/angular/dynamic (barrel) or @solar-icons/angular/dynamic/home (single).

Dynamic rendering with `SolarIcon`

The SolarIcon directive creates icons at runtime from a component class or registered name. Use it when the icon to render is only known at runtime (data-driven, CMS, user config).

import { Component } from '@angular/core'
import { SolarIcon, provideSolarIcons } from '@solar-icons/angular'
import { SolarHome } from '@solar-icons/angular/dynamic'
import { SolarHeartBold } from '@solar-icons/angular'

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

Usage	Import	Requires registry
`[solarIcon]="SomeClass"`	Class reference	No
`solarIcon="'RegisterName'"`	String name	`provideSolarIcons`

SolarIcon accepts size, color, strokeWidth, weight, secondaryColor, secondaryOpacity, alt, ariaLabel, and titleAttr. All forward to the created icon. Clearing an input (setting it to undefined) resets the icon to its defaults.

Icon props

Input	Type	Description
`color`	`string`	Icon color
`size`	`string \| number`	Width and height
`strokeWidth`	`string \| number`	Stroke width
`secondaryColor`	`string`	Duotone accent color
`secondaryOpacity`	`number`	Duotone accent opacity
`isolated`	`boolean`	Ignores provider
`alt`	`string`	Accessibility label. Renders `<title>` in SVG.
`ariaLabel`	`string`	`aria-label` attribute
`titleAttr`	`string`	Explicit `<title>` text

Angular inputs are camelCase. Bind them in templates with [strokeWidth]="2", not [stroke-width].

CSS variables

Icons read from CSS custom properties when explicit inputs are omitted:

:host {
    --solar-color: #ef4444;
    --solar-size: 32px;
    --solar-stroke-width: 2;
}

CSS classes

Every icon renders with class solar plus solar-{kebab-name}-{style}. For example, SolarHeartBold renders with solar solar-heart-bold.

ESM only

@solar-icons/angular is ESM-only.

On this page