CODEWITHSUNDEEP
angularionic-frameworkionic3ionicons
Andrei
Andrei

Reputation: 2332

Ionicons not showing anymore when switching to @IonicPage components

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.

Upvotes: 0

Views: 1578

Answers (1)

99tharun
99tharun

Reputation: 1216

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 {}

Upvotes: 1

Related Questions