Lucide Labs Icons Not Working in Angular (LucideAngularModule.pick with @lucide/lab)

[MeMeeMee]

Hello everyone 👋

I’m trying to use Lucide Labs icons in an Angular project following the official Lucide Angular documentation. The core Lucide icons work as expected, but icons from @lucide/lab fail to render, even though I followed all the steps from the guide.

UserModule.ts

import { ShoppingBasket, LucideAngularModule } from 'lucide-angular';
import { broom } from '@lucide/lab';

@NgModule({
  declarations: [UserComponent],
  imports: [
    CommonModule,
    LucideAngularModule.pick({ ShoppingBasket, broom }),  // ⛔ broom doesn't render
  ]
})
export class UserModule { }

UserComponent.html

<div class="bg-blue-100 w-full h-full">
    <i-lucide name="shopping-basket" [strokeWidth]="2"></i-lucide>
    <i-lucide name="broom" [strokeWidth]="2"></i-lucide>   <!-- ⛔ broom doesn't render -->
</div>

Result

Console Error

Component update failed: The "broom" icon has not been provided by any available icon providers.
Error: The "broom" icon has not been provided by any available icon providers.
    at LucideAngularComponent.ngOnChanges (lucide-angular.js:24920)
    at LucideAngularComponent.rememberChangeHistoryAndInvokeOnChangesHook (chunk-ULLLBF5Y.js:6460)
    at callHookInternal (chunk-ULLLBF5Y.js:7064)
    ...

The broom icon (and other @lucide/lab icons) should render when passed into LucideAngularModule.pick() the same way core Lucide icons do.
Thanks for your help — and for your awesome work on Lucide! 💙

[1abcdefggs]

In lab, it install it. (Sorry if you've already installed it.)

I’m using React, and I also encountered an error with lab icons yesterday.

In my case, the issue was solved by installing the @lucide/lab package separately, since lab icons are not included in lucide-react.

Package

npm install @lucide/lab

I think Angular is the same.
lucide-icons/lucide-lab#installation : [lucide-lab installation guide](https://github.com/lucide-icons/lucide-lab#installation)

[MeMeeMee]

Thanks for the input @1abcdefggs. I didn't solve it yet because i always took some alternative icons that exist in the main library. The thing is, I had the lab package installed and it still didn't work...

[1abcdefggs]

@MeMeeMee Thank you for your reply. I also tried it with Angular. For some reason it didn't display, just like you.

It displayed when I mapped it.

lab icon

•   Broom: broom, 
  

•   GlassesSquare: glassesSquare 
  

app.config.ts


import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
// Core icons from the main package (PascalCase)
import { LucideAngularModule, File, House, Menu, UserCheck } from 'lucide-angular';
// Experimental icons from the lab package (camelCase)
import { broom, glassesSquare } from '@lucide/lab';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    // Register all icons.
    // Map the camelCase lab icons to PascalCase keys for lucide-angular.
    importProvidersFrom(LucideAngularModule.pick({ 
      File, 
      House, 
      Menu, 
      UserCheck, 
      Broom: broom, // Map camelCase data to PascalCase key
      GlassesSquare: glassesSquare // Map camelCase data to PascalCase key
    }))
  ]
};

<h1>Icons</h1>

<div class="icon-set">
  <div class="icon-wrapper">
    <p>File</p>
    <lucide-icon name="file" size="48"></lucide-icon>
  </div>

  <div class="icon-wrapper">
    <p>House</p>
    <lucide-icon name="house" size="48"></lucide-icon>
  </div>

  <div class="icon-wrapper">
    <p>Menu</p>
    <lucide-icon name="menu" size="48"></lucide-icon>
  </div>

  <div class="icon-wrapper">
    <p>User Check</p>
    <lucide-icon name="user-check" size="48"></lucide-icon>
  </div>

  <div class="icon-wrapper">
    <p>Broom</p>
    <lucide-icon name="broom" size="48"></lucide-icon>
  </div>

  <div class="icon-wrapper">
    <p>Glasses Square</p>
    <lucide-icon name="glasses-square" size="48"></lucide-icon>
  </div>
</div>

<hr>

<router-outlet />

Error broom only

When I changed "Broom: broom" to "broom", the icon didn't appear.

ui

code

Error By the way, if you write only "Broom," an error will occur.

ui

code

This may be because the key was not found in the pick().

pick() might be the cause.

When I looked at the next page, for some reason, Anguar wasn't there, although React and Vue were.
(https://github.com/lucide-icons/lucide-lab/tree/main/packages/lab)

[MeMeeMee]

Wow, that's crazy. You're a King @1abcdefggs . How did you come up with the idea that the mapping could be an issue? Btw, i checked the docs and they seem to be wrong. I guess that this should be reported.