Ionicons version 5 with angular

Question

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

score 3 · Answer 1 · answered Sep 17 '20 at 15:56

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>

score 2 · Answer 2 · answered Feb 20 '20 at 12:51

2

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.

answered Feb 20 '20 at 12:51

JJ Lee

31
4

i've searched in forums for days, cleaning cache, installing npm, this solution worked like a charm – fsalazar_sch May 05 '20 at 08:40

score 2 · Accepted Answer · answered Mar 02 '20 at 22:26

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.

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. — anthony willis muñoz, Mar 03 '20 at 16:31
This is working. However, I am not able to style the icons via nb-icon. Any ideas? — Nick, Apr 25 '20 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 — Matteo Gaggiano, Apr 26 '20 at 18:16

Ionicons version 5 with angular

3 Answers3