With Lucide Lab or custom icons

Lucide Lab is a collection of icons that are not part of the Lucide main library.

While they aren't provided as standalone components, they can be still be passed to the LucideIcon component the same way as official icons:

Directly as LucideIconData

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));
}

Open Sandbox

As a provided icon by name

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

@Component({
  selector: 'app',
  template: `
    <svg lucideIcon="bat-ball"></svg>
  `,
  imports: [LucideDynamicIcon],
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}

Open Sandbox

Creating custom icon components

You can also create your own standalone icon components using LucideIconBase.

Be sure to use an SVG element selector, e.g. svg[lucide{IconName}]

import { Component, ViewEncapsulation, signal } from "@angular/core";
import { LucideDynamicIcon, lucideLegacyIcon } from '@lucide/angular';
import { LucideBottleChampagne } from "../icons/bottle-champagne";

@Component({
  selector: 'app',
  template: `<svg lucideBottleChampagne></svg>`,
  imports: [LucideBottleChampagne],
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}

Open Sandbox