Custom Icon font in Ionic 2 7

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





Leave a comment

Your email address will not be published. Required fields are marked *

7 thoughts on “Custom Icon font in Ionic 2