lucide/docs/guide/packages/lucide-angular.md

Lucide Angular

Implementation of the lucide icon library for Angular applications.

Installation

::: code-group

pnpm install lucide-angular

yarn add lucide-angular

npm install lucide-angular

bun add lucide-angular

:::

How to use

Step 1: Import LucideAngularModule

In any Angular module you wish to use Lucide icons in, you have to import LucideAngularModule, and pick any icons you wish to use:

import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular';

@NgModule({
  imports: [
    LucideAngularModule.pick({File, Home, Menu, UserCheck})
  ]
})
export class AppModule { }

or using standalone version:

import { Component } from '@angular/core';
import { LucideAngularModule, FileIcon } from 'lucide-angular';

@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  imports: [LucideAngularModule]
})
export class AppComponent {
  readonly FileIcon = FileIcon;
}

Step 2: Use the icons in templates

Within your templates you may now use one of the following component tags to insert an icon:

<lucide-angular name="file" class="my-icon"></lucide-angular>
<lucide-icon name="home" class="my-icon"></lucide-icon>
<i-lucide name="menu" class="my-icon"></i-lucide>
<span-lucide name="user-check" class="my-icon"></span-lucide>

for standalone

<lucide-angular [img]="FileIcon" class="my-icon"></lucide-angular>
<lucide-icon [img]="FileIcon" class="my-icon"></lucide-icon>
<i-lucide [img]="FileIcon" class="my-icon"></i-lucide>
<span-lucide [img]="FileIcon" class="my-icon"></span-lucide>

Props

You can pass additional props to adjust the icon appearance.

name	type	default
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	boolean	false

<i-lucide name="home" [size]="48" color="red" [strokeWidth]="1"></i-lucide>

Global configuration

You can inject the LucideIconConfig service in your root component to globally configure the default property values as defined above.

Styling using a custom CSS class

Any extra HTML attribute is ignored, but the class attribute is passed onto the internal SVG image element and it can be used to style it:

svg.my-icon {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

Injecting multiple icon providers

You may provide additional icons using the LUCIDE_ICONS injection token, which accepts multiple providers of the interface LucideIconsProviderInterface with the utility class LucideIconsProvider available for easier usage:

import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
import { MyIcon } from './icons/my-icon';

const myIcons = {MyIcon};

@NgModule({
  providers: [
    {provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(myIcons)},
  ]
})
export class AppModule { }

To add custom icons, you will first need to convert them to an svgson format.

Loading all icons

::: danger You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size. :::

import { icons } from 'lucide-angular';

...

LucideAngularModule.pick(icons)

With Lucide lab or custom icons

Lucide lab is a collection of icons that are not part of the Lucide main library. They can be used in the same way as the official icons.

import { LucideAngularModule } from 'lucide-angular';
import { burger } from '@lucide/lab';

@NgModule({
  imports: [
    LucideAngularModule.pick({ burger })
  ]
})
export class AppModule { }