How to use feather-icons with Angular standalone components

Question

I tried to follow the angular-feather guide:

const icons = {
  Camera,
  Heart,
  Github,
};

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CommonModule, FeatherModule.pick(icons)],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})

But this error: Type 'ModuleWithProviders<FeatherModule>' is not assignable to type 'readonly any[] | Type<any>'.ts(2322) Component imports contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'-style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead.

Answer 1

As you can see in the Angular standalone component guide, you can solve the problem in the same way as they solve it for the router:

The standalone bootstrap operation is based on explicitly configuring a list of Providers for dependency injection. However, existing libraries may rely on NgModules for configuring DI. For example, Angular’s router uses the RouterModule.forRoot() helper to set up routing in an application.

Add importProvidersFrom(FeatherModule.pick(icons)) to the list of providers in the app.congig.ts file (used in the main.ts file);

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(),
    importProvidersFrom(FeatherModule.pick(icons)),
  ],
};

And then add to your component imports FeatherModule.