Chapter 104: Migrating from lucide-angular ⇒ @lucide/angular

Core Idea

@lucide/angular moves from a module + single component based API to a more modern Angular approach:

Key Concepts

• The library defines modern signal-based, standalone components, without zone.js based change detection.
• Icons are consumed as standalone imports (one component per icon).
• Dynamic icon registration is done via provideLucideIcons(), not using NgModule.
• Static icons use per-icon components for better tree-shaking.
• Dynamic icons still use a single dynamic component (svg[lucideIcon]).
• Global defaults are configured via provideLucideConfig().
• Brand icons have been removed, see the next section.
• App-wide: AppModule.providers or bootstrapApplication(...providers)

Code Examples

import { BrowserModule, NgModule } from '@angular/core';
import { LucideAngularModule, AirVent, AlarmClock } from 'lucide-angular';

@NgModule({
  imports: [
    BrowserModule,
    LucideAngularModule.pick({ AirVent, AlarmClock }),
  ],
})
export class AppModule {}

• What it demonstrates: Migrating from lucide-angular ⇒ @lucide/angular usage pattern from the official Lucide docs.

Key Takeaways

1. The library defines modern signal-based, standalone components, without zone.js based change detection.
2. Icons are consumed as standalone imports (one component per icon).
3. Dynamic icon registration is done via provideLucideIcons(), not using NgModule.
4. Static icons use per-icon components for better tree-shaking.
5. Dynamic icons still use a single dynamic component (svg[lucideIcon]).

Connects To

• Angular: part of the Angular section of the Lucide docs.
• Lucide for Angular: overview page for this section.