Getting Started

Install and configure Solar Icons in your Angular project.

Installation

Install the package from npm:

bash
npm install @rchernando/solar-icons

Requirements

  • Angular 15 or higher
  • Works with standalone components and NgModule

Basic Setup (Standalone)

Register icons using the provideSolarIcons function in your application config:

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

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

Basic Setup (NgModule)

For NgModule-based applications, use SolarIconsModule.withIcons:

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 {}

Using Icons in Templates

Once icons are registered, use the <solar-icon> component in your templates:

html
<solar-icon name="heart" iconStyle="bold" size="24" />