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