Step 1

Gather your SVG icons and head over to https://icomoon.io. Here create a new icon pack and upload your custom svgs.

Once done download and extract the iconmoon.zip file and put the fonts inside src/assets/fonts/iconmoon/

Now create a new scss file inside src/theme/iconmoon.scss, make sure your paths to the fonts match up.

Include the following:

@font-face {
font-family: 'icomoon';
src: url('../assets/fonts/iconmoon/icomoon.eot?3e91zf');
src: url('../assets/fonts/iconmoon/icomoon.eot?3e91zf#iefix') format('embedded-opentype'),
url('../assets/fonts/iconmoon/icomoon.ttf?3e91zf') format('truetype'),
url('../assets/fonts/iconmoon/icomoon.woff?3e91zf') format('woff'),
url('../assets/fonts/iconmoon/icomoon.svg?3e91zf#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

@mixin makeIcon($arg, $val) {
.ion-ios-#{$arg}:before ,
.ion-ios-#{$arg}-circle:before ,
.ion-ios-#{$arg}-circle-outline:before ,
.ion-ios-#{$arg}-outline:before ,
.ion-md-#{$arg}:before ,
.ion-md-#{$arg}-circle:before ,
.ion-md-#{$arg}-circle-outline:before ,
.ion-md-#{$arg}-outline:before {
font-family: "icomoon" !important;
content: $val;
}
}

@include makeIcon(icon-new-calendar, '\e904');

Step 2

Make sure to import the iconmoon.scss file in to variables.scss inside the theme directory.

Step 3

Now inside our .html files we can then apply the fonts by applying the class appropriately, eg:

<ion-tabs [selectedIndex]="selectedIndex" class="c-tabsnav">
<ion-tab [root]="tab4Root" tabTitle="Profile" tabIcon="icon-new-calendar,"></ion-tab>
</ion-tabs>

Below are some custom icons that have been included in to an app I’ve been working on recently.

References:
Stack Overflow

The post Custom icon fonts in Ionic 2 appeared first on Nicholas Rowe.