0

After changing my pages to be lazy loaded (via @IonicPage with separate modules) all ionicons dissapeared. When declaring the components directly in app.module.ts, everything works fine.

I did find a workaround using web components, but it's pretty cumbersome and I still think this is either a bug or I did not know how to import the proper module or didn't create the structure as it was supposed to.

This is how I use the ionicons:

 <button [navPush]="'admin'" ion-button icon-end>
        Admin
        <ion-icon name="star"></ion-icon>
 </button>

How it should look like: Icon is visible (no lazy loaded pages)

Icon not visible anymore after switching to separate modules and @IonicPage Component: Icon is not visible (lazy loaded pages)

I also created an issue with all the details: https://github.com/ionic-team/ionicons/issues/526

My question is: Do we need to explicitly import the ionicons as a module in the code? If so, how can I do that.

Any help much appreciated, thank you in advance.

Andrei
  • 2,282
  • 26
  • 35

1 Answers1

1

You need to import IonicModule in any component modules that uses Ionic components, not with the forRoot(), but simply importing IonicModule.

Update your components.module.ts file as follows:

import { NgModule } from "@angular/core";
import { IonicModule } from "ionic-angular";
import { AppFooterComponent } from './app-footer/app-footer';
import { AppHeaderComponent } from './app-header/app-header';
@NgModule({
  declarations: [
    AppFooterComponent,
    AppHeaderComponent
  ],
  imports: [
    IonicModule,
  ],
  exports: [
    AppFooterComponent,
    AppHeaderComponent
  ]
})
export class ComponentsModule {}
99tharun
  • 1,216
  • 3
  • 20
  • 36