lucide/docs/packages/lucide-angular.md

# Lucide Angular

Implementation of the lucide icon library for angular applications.

## Installation

``` sh
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`.

``` html
<!-- app.component.html -->
<div id="lucide-icon"></div>
```

``` js
// 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`.

``` js
// 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 { }
```

``` html
<!-- 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`.

``` js
// 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 { }
```

``` xml
<!-- app.component.html -->
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
```

``` js
// 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:

``` js

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