lucide-angular

Lucide Angular

Implementation of the lucide icon library for angular applications.

What is lucide? Read it here.

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="ico"></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('ico');
    const elm = createElement(Activity);
    elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
    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 } from 'lucide-angular';
import { AlarmCheck, Edit } from 'lucide-angular/icons';  // or import other icons

@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.css */
.myicon {
  /* Be sure to set these values */
  width: 48px;
  height: 48px;
  /* or other properties like `color`, `fill`, `stroke-width` */
}

<!-- app.component.html -->
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
<lucide-icon name="edit" class="myicon"></lucide-icon>

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
}

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.css */
.myicon {
  /* Be sure to set these values */
  width: 48px;
  height: 48px;
  /* or other properties like `color`, `fill`, `stroke-width` */
}

<!-- 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/icons';

@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