Ionicons disappear when using lazy loaded pages

[frostyandy2k]

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

I did find a workaround, 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.

Module for the main page (HomePage):

import { NgModule } from "@angular/core";
import { IonicPageModule } from "ionic-angular";
import { HomePage } from "./home";
import { ComponentsModule } from "../../components/components.module";

@NgModule({
  declarations: [HomePage],
  imports: [IonicPageModule.forChild(HomePage), ComponentsModule],
  bootstrap: [HomePage]
})
export class HomePageModule {}

• Broken version: https://github.com/ScaleIT-Org/ionic-app-skeleton/tree/ionicon-broken
• "No lazy load" working version: https://github.com/ScaleIT-Org/ionic-app-skeleton/tree/ionicon-fix-no-lazy-load
• Fixed (workaround Ionicons v4 - Web Component Testing #499) version: https://github.com/ScaleIT-Org/ionic-app-skeleton/tree/ionicon-workaround-fix

As you can see, no icon is shown and the the css content is empty.

Detail view of the button that should have an icon.

This is how it should look like:

The code:

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

If you try it out, you might need to clean up the build. I used the following:

rm -rf .sourcemaps/
rm -rf www/
ionic serve -l

Thanks in advance and thank you for this wonderful (yet pretty hard to learn) framework!

[frostyandy2k]

Fixed, i did incorrectly use IonicModule.forRoot(AppHeaderComponent) instead of simply adding IonicModule.

https://stackoverflow.com/questions/49157486/ionicons-not-showing-anymore-when-switching-to-ionicpage-components/49159363#49159363