Custom icon fonts in Ionic 2

This tutorial will show you how to use custom icons within your Ionic 2 app.

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:

[css]

@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’);

[/css]

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:

[html]

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

[/html]

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