Lucide Angular ​

Implementation of the lucide icon library for Angular applications.

Installation ​

pnpm install lucide-angular

pnpm install lucide-angular

yarn add lucide-angular

yarn add lucide-angular

npm install lucide-angular

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

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

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

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>

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

Props ​

You can pass additional props to adjust the icon appearance.

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

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

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

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 ​

import { icons } from 'lucide-angular';

...

LucideAngularModule.pick(icons)

import { icons } from 'lucide-angular';

...

LucideAngularModule.pick(icons)