Using custom icons in Ionic 2 or 3

app.scss

@import '../theme/icons'; // that icons.scss above

@include makeIcon(mb-orders, '\e92e');
@include makeIcon(mb-home, '\e900');
@include makeIcon(mb-account, '\e901');

icons.scss

// @see https://yannbraga.com/2017/06/28/how-to-use-custom-icons-on-ionic-3
// you can upload your own SVG. had mine exported from SketchApp
// or choose from any available fonts with svg
// upload here -- https://icomoon.io/app/ and just follow the steps to download the assets
// and note of the content for your icons (e.g. `\e901`)

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

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin makeIcon($arg, $val) { 
  .#{$arg}:before , 
  .ion-ios-#{$arg}:before , 
  .ion-ios-#{$arg}-outline:before , 
  .ion-md-#{$arg}:before , 
  .ion-md-#{$arg}-outline:before { 
    content: $val; 
    font-size: 26px; 
  } 
}