3

So my styles file looks like this:

@import "normalize.css";
@import "ionicons/dist/css/icons.min.css";
@import "base/_grid";
@import "base/_variables";
@import "base/_mixins";
@import "base/_global";

@import "modules/_wrapper";
@import "modules/_row";
@import "modules/_hero";
@import "modules/_buttons";
@import "modules/_main-navigation";

Everything except ionicons works fine, and the ionicons.min.css file gets shown in the bundled css file, as well as normalize.css etc. The problem is that icons don't show unless I manually include the cdn in the index.html file... What I am missing here..?

So, when included from node_modules, ionicons don't appear in sources.

Thanks for all the help!

Smithy
  • 807
  • 5
  • 17
  • 43

1 Answers1

0

could you check if it is similar to this (no icons are loaded): https://github.com/ionic-team/ionicons/issues/526

If so, you can use the web component mechanism described in https://github.com/ionic-team/ionicons/issues/499

I basically included this script in index.html:

<!-- Fix for missing ionicons if using lazy loaded pages -->
  <script src="https://unpkg.com/ionicons@4.0.0-11/dist/ionicons.js"></script>

With this, you can use the ionicons in the intended manner:

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

If you want to use it offline, I downloaded the (700) files in my repository. Also if you just want to see it in action go to: https://github.com/ScaleIT-Org/ionic-app-skeleton/tree/ionicon-workaround-fix

Andrei
  • 2,282
  • 26
  • 35