Usage Patterns

Three ways to register icons depending on your application architecture.

1. Provider Function (Recommended)

The recommended approach for standalone applications. Register icons at the application or route level using provideSolarIcons.

typescript

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideSolarIcons } from '@rchernando/solar-icons';
import { HeartBold, StarOutline } from '@rchernando/solar-icons/like';
import { UserLinear } from '@rchernando/solar-icons/users';

export const appConfig: ApplicationConfig = {
  providers: [
    provideSolarIcons(HeartBold, StarOutline, UserLinear)
  ]
};

2. NgModule Pattern

For traditional NgModule-based applications. Import SolarIconsModule.withIcons in your module.

typescript

// app.module.ts
import { SolarIconsModule } from '@rchernando/solar-icons';
import { HeartBold, StarOutline } from '@rchernando/solar-icons/like';

@NgModule({
  imports: [
    SolarIconsModule.withIcons(HeartBold, StarOutline)
  ]
})
export class AppModule {}

3. Imperative Registration

For dynamic or runtime icon loading scenarios. Inject SolarIconsService and call addIcons directly.

typescript

import { Component, inject } from '@angular/core';
import { SolarIconsService } from '@rchernando/solar-icons';
import { HeartBold } from '@rchernando/solar-icons/like';

@Component({
  selector: 'app-my-component',
  template: `<solar-icon name="heart" iconStyle="bold" />`
})
export class MyComponent {
  private iconService = inject(SolarIconsService);

  loadIcons() {
    this.iconService.addIcons(HeartBold);
  }
}

When to Use Each Pattern

Pattern	Best For	Tree-Shakable
provideSolarIcons()	Standalone apps, route-level registration, lazy loading	Yes
SolarIconsModule.withIcons()	NgModule-based applications	Yes
SolarIconsService.addIcons()	Dynamic/runtime loading, conditional icons	Yes