Ionicons version 5 with angular

Asked 9/2, 2020 at 2:50 Answered 17/9, 2020 at 15:56

Solved angular ionic-framework nebular ionicons

How to add ionicons version 5 to angular, with version 4.5 there was a scss available and I can use in that way but now in version 5 ionicons use svgs and don't know how to integrate it with angular.

Current approach In angular.json

"styles": [
              "./node_modules/ionicons/dist/scss/ionicons.scss",
              "src/app/theme/styles/styles.scss"
            ],

Then in my app.component.ts (I'm using nebular UI) https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack

export class AppComponent implements OnInit {

  constructor(private iconsLibrary: NbIconLibraries, public store$: Store<any>, ) {
    iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' });
    iconsLibrary.registerFontPack('nebular', { iconClassPrefix: 'nb' });
    iconsLibrary.setDefaultPack('nebular');
    // @ts-ignore
    if (window.Cypress) {
      // @ts-ignore
      window.__appStore__ = store$;
    }
  }

  ngOnInit() {
  }
}

I see in issues that for ionic with angular them add

"assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ]

but I don't know how to continue

Topside answered 9/2, 2020 at 2:50 Comment(0)

You can easily hack the icons.

I created this gist, you can download and it to your project.

Then import the NbIonIcons const in AppComponent and then add it using the Nebular method registerSvgPack from NbIconLibraries (example below)

...
import {NbIonIcons} from './icons';
....
export class AppComponent implements OnInit {

  constructor(private iconsLibrary: NbIconLibraries, public store$: Store<any>, ) {
    iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' });
    iconsLibrary.registerFontPack('nebular', { iconClassPrefix: 'nb' });

    iconsLibrary.registerSvgPack('ionicons', NbIonIcons);

    iconsLibrary.setDefaultPack('nebular');
    // @ts-ignore
    if (window.Cypress) {
      // @ts-ignore
      window.__appStore__ = store$;
    }
  }

  ngOnInit() {
  }
}

At this point you can use you icons as usual.

<nb-icon icon="home-outline" pack="ionicons"></nb-icon>

Keep in mind that you have to update the list if icons are added / removed from package.

Sail answered 2/3, 2020 at 22:26 Comment(3)

seems like this should work, didnt have time this week to test it. the only annoying thing is the manually part when ionic get update. I will approve it soon ty. – Lammond 3/3, 2020 at 16:31

This is working. However, I am not able to style the icons via nb-icon. Any ideas? – Autocorrelation 25/4, 2020 at 19:20

Maybe you can extend the nbIcon service/directive and use the useClass to provide the new directive. I done a similar devlop on the NbMenu adding the tooltips on it but using the original NbMenuService – Sail 26/4, 2020 at 18:16

Step 1: npm install ionicons

Step 2: include ionicons in assets in angular.json

"assets": [
          "src/favicon.ico",
          "src/assets",
          {
            "glob": "**/*",
            "input": "node_modules/ionicons/dist/ionicons",
            "output": "./ionicons"
          },
          {
            "glob": "**/*.js",
            "input": "node_modules/ionicons/dist/",
            "output": "./"
          }
        ],

Step 3: Add script in Index.html

<body class="mat-typography">
<app-root></app-root>
  <script type="module" src="ionicons/ionicons.esm.js"></script>
  <script nomodule="" src="ionicons.js"></script>
</body>

Step 4: Add schemas: [ CUSTOM_ELEMENTS_SCHEMA ] in app.module.ts

@NgModule({
declarations: [
    AppComponent
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

if you are using ion-icon in another module add schemas: [ CUSTOM_ELEMENTS_SCHEMA ] so you won't get web component error.

Step 5: Use Regular like

<ion-icon name="heart"></ion-icon>

Walleyed answered 17/9, 2020 at 15:56 Comment(0)

Ionicons ver 5 doesn't looks like supporting font icon file like Ionic 4 ,https://github.com/ionic-team/ionicons/tree/4.x#using-the-font-icon anymore.

Ninos answered 20/2, 2020 at 12:51 Comment(1)

i've searched in forums for days, cleaning cache, installing npm, this solution worked like a charm – Bernita 5/5, 2020 at 8:40