How to add Lucide Icons to Angular 17 Standalone App

Jan 23, 2024

When you are using standalone Angular 17, you have to import the icons you want to use from lucide-angular and add them to the importProvidersFrom function.

Installation

npm i lucide-angular --save

Setup

main.ts

import {bootstrapApplication} from '@angular/platform-browser';
import {appConfig} from './app/app.config';
import {AppComponent} from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
	.catch((err) => console.error(err));

app.config.ts

Add lucide icons to the importProvidersFrom function.

import {ApplicationConfig, importProvidersFrom} from '@angular/core';
import {provideRouter} from '@angular/router';

import {routes} from './app.routes';
import {LucideAngularModule, ArrowUpRight, File, Home, Menu, UserCheck} from "lucide-angular";

export const appConfig: ApplicationConfig = {
	providers: [
		provideRouter(routes),
		importProvidersFrom(LucideAngularModule.pick({File, Home, Menu, UserCheck, ArrowUpRight}))
	],
};

Now you can use the icons in your app.

Usage

<lucide-icon name="arrow-up-right" [size]="18"></lucide-icon>
<lucide-icon name="home" [size]="18"></lucide-icon>

Alternatively you can also use img to individually import the icons and use them in any component.

<lucide-icon [img]="ArrowUpRight" [size]="18"></lucide-icon>

References

• Angular 17 Standalone
• Lucide Icons