Chapter 111: With Lucide Lab or custom icons

Core Idea

Learn how to use icons from Lucide Lab in your Angular application.

Code Examples

import { Component, ViewEncapsulation, signal } from "@angular/core";
import { LucideDynamicIcon, lucideLegacyIcon } from '@lucide/angular';
import { coconut } from '@lucide/lab';

@Component({
  selector: 'app',
  template: `
    <svg [lucideIcon]="icon()"></svg>
  `,
  imports: [LucideDynamicIcon],
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
  readonly icon = signal(lucideLegacyIcon('coconut', coconut));
}

• What it demonstrates: With Lucide Lab or custom icons usage pattern from the official Lucide docs.

Key Takeaways

1. Learn how to use icons from Lucide Lab in your Angular application.

Connects To

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