Custom Icon font in Ionic 2

Create/Get icons in SVG format (e.g. FlatIcon)

Create and download icons-font using IcoMoon App

Extract only the font folder from the downloaded icomoon.zip  archive to assets  folder.

Create a new file in theme  folder called _icomoon.scss  with following content (thanks to Stackoverflow user):

// icomoon
@font-face {
    font-family: 'icomoon';
    src: url('../assets/fonts/icomoon.eot?ls340j');
    src: url('../assets/fonts/icomoon.eot?ls340j#iefix') format('embedded-opentype'),
    url('../assets/fonts/icomoon.ttf?ls340j') format('truetype'),
    url('../assets/fonts/icomoon.woff?ls340j') format('woff'),
    url('../assets/fonts/icomoon.svg?ls340j#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;
    }
}

// Add such entries for each icon:
//@include makeIcon(icon-balance, '\e900')

Import that file in variables.scss :

@import "icomoon";

Now you will have to write following line for each icon you want to use from your generated icon-font:

@include makeIcon(icon-<NAME>, '\e<NUMBER>')

// Example: @include makeIcon(icon-balance, '\e900')

The NUMBER you will get from the icomoon.zip  archive in style.css  like:

.icon-balance:before {
  content: "\e900";
}

Now you can use your icons in the usual Ionic2 way:

<ion-icon name="icon-balance"></ion-icon>