Lucide

Lucide Angular

Implementation of the lucide icon library for angular applications.

Installation

yarn add lucide-angular
# or
npm install lucide-angular

How to use

There are three ways for use this library.

Method 1: createElement

After install lucide-angular change content of file app.component.html and app.component.ts.

<!-- app.component.html -->
<div id="lucide-icon"></div>
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { createElement } from 'lucide-angular';
import { Activity } from 'lucide-angular/icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
const div = document.getElementById('lucide-icon');
const elm = createElement(Activity);
elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
if (div) {
div.appendChild(elm);
}
}
}

Method 2: User Tag with name property

After install lucide-angular change content of file app.component.html, app.component.ts, app.component.css and app.module.ts.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<!-- app.component.html -->
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
<lucide-icon name="edit" class="myicon"></lucide-icon>

Method 3: User Tag with img property

After install lucide-angular change content of file app.component.html, app.component.ts, app.component.css and app.module.ts.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LucideAngularModule } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<!-- app.component.html -->
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
// app.component.ts
import { Component } from '@angular/core';
import { Airplay, Circle } from 'lucide-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ico1 = Airplay;
ico2 = Circle;
}

Notes

Import all icons

In Method 2: import all icons in app.module.ts by:

import { icons } from 'lucide-angular/icons';
LucideAngularModule.pick(icons)
...

Tags

You can use the following tags instead of lucide-icon:

  • lucide-angular
  • i-lucide
  • span-lucide

All of the above are the same


Powered by Vercel