CODEWITHSUNDEEP
angularionic-frameworknebularionicons
anthony willis muñoz
anthony willis muñoz

Reputation: 2478

Ionicons version 5 with angular

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

Upvotes: 6

Views: 5635

Answers (3)

Sathish Kumar
Sathish Kumar

Reputation: 41

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>

Upvotes: 3

Matteo Gaggiano
Matteo Gaggiano

Reputation: 1305

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.

Upvotes: 2

JJ Lee
JJ Lee

Reputation: 31

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.

Upvotes: 2

Related Questions