Ionic - add custom icons

I am using ionic to develop my next android app. I wanted to use icons which were not provided by ionicons. Following are the steps, which can help to easily add new font icons to your app.

1. Create .svg file using tool like Adobe illustrator
2. Create fonts file using tool like Icomoon and save those files in the www\fonts folder
3. In the file www\css\styles.css , add
@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
.custom-order:before {
  display: inline-block;
  font-family:"icomoon"; /* "Ionicons";*/
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.custom-order:before {
  content: "\e900"; }/* e900 is the icon, I need for orders.*/
 
 4. add custom-order in the tabs.html in place of previous icon.

 ion-tab title="Orders" icon-off="custom-order" icon-on="custom-order"

You can use these fonts similarly across the application.