Using NgIconsModule in SharedModules

[RobertoHixsa]

Hi, I can import Icons using the NgIconsModule without any problem but I can't export them. How can I use them in this way?

[ashley-hunter]

Hi, sure, so as you discovered you cannot export them from an NgModule, the reason for that is that NgModules can only export components. Our icons are not components but instead are strings that are registered in Angular's dependency injection system. With the way the DI system works this makes icons available to any child components (or lazy loaded modules) without any need to export.

To make icons available to your entire application you can either register them in the AppModule:

@NgModule({
    imports: [NgIconsModule.withIcons(MaterialIcons)]
})
export AppModule {}

Or have a CoreModule that your AppModule imports. This module typically contains anything that registers things with the DI system e.g.:

@NgModule({
    imports: [NgIconsModule.withIcons(MaterialIcons)]
})
export CoreModule {}


@NgModule({
    imports: [CoreModule]
})
export AppModule {}

If you want however you can still export the NgIcon component in your shared module, this will allow any components with access to shared module access to use <ng-icon> in their templates:

@NgModule({
    imports: [NgIconsModule],
    exports: [NgIconsModule],
})
export SharedModule {}

If anything is unclear let me know and I will try and clarify further.

[RobertoHixsa]

Thanks a lot for your help. Now everything is clear!

[ashley-hunter]

Excellent! No problem!