Lucide Icons

Lucide is an open-source icon library that provides 1000+ vector (SVG) icons for use in digital and non-digital projects. This library simplifies incorporating icons into web applications by providing several official packages, including the Angular package for easy integration.

Installation

Package Managers

Install the Lucide Angular package using npm or yarn:

yarn add lucide-angular --save

Implementation

Follow these steps to use Lucide Icons in your Angular project.

// Import the Lucide Angular module in your component or module file
import { LucideAngularModule } from 'lucide-angular';

@Component({
    selector: [/* your components */],
    standalone: true,
    imports: [
    LucideAngularModule,
        // other imports
    ],
    templateUrl: [/* your components */],
    styleUrl: [/* your components */],
    })
export class AppModule { }
            

Usage Example

Use the Lucide icons directly in your templates:

<lucide-angular name="eye" class="inline-block ltr:mr-1 rtl:ml-1 size-4"></lucide-angular>

For More Details

For more details on using Lucide icons in Angular, refer to the official documentation:

See the Lucide Angular Documentation.