angularionic-frameworknebularionicons

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


Solution

  • 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.