How to add lucide-angular to the standalone Angular app?

I want to add lucide-icon package to my standalone Angular app. Accroding to it's document it's availabe for the Angular module but I'm using standalone mode, so how to add this package to the component?

I tried this way but it gives me error.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NgClass, NgOptimizedImage } from '@angular/common';
import { cx } from 'class-variance-authority';
import { LucideAngularModule, Home } from 'lucide-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NgOptimizedImage, NgClass, LucideAngularModule.pick({Home})],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'tasko';
  protected readonly cx = cx;
}

Here is a basic example of the implementation, we need to use importProvidersFrom and get the providers from the main module, using the below code!

bootstrapApplication(App, {
  providers: [importProvidersFrom(LucideAngularModule.pick({ Home }))],
});

To use the components (lucide-angular) we need to directly import the module in the component imports!

...
imports: [LucideAngularModule],
...

full code

import { Component, importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { LucideAngularModule, Home } from 'lucide-angular';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LucideAngularModule],
  template: `
    <lucide-angular name="home" class="my-icon"></lucide-angular>
    <lucide-icon name="home" class="my-icon"></lucide-icon>
    <i-lucide name="home" class="my-icon"></i-lucide>
    <span-lucide name="home" class="my-icon"></span-lucide>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [importProvidersFrom(LucideAngularModule.pick({ Home }))],
});

stackblitz