How to use custom Icon Font in SAPUI5?

Sometimes we may have experienced situations where SAP icons are not fit to the use case.SAP icons are based on the icon font concept,which is an embedded font not a pixel image.So these icons are easily scalabe and also we can change its color and apply different css effects.
In this tutorial we will add a custom icon as icon font and register it to sap.ui.core.IconPool.We will also see it in SAPUI5 application.

Steps

Prepare vector images for the custom icon.You can create or you can download from free download sites .SVG files(.svg) are easily scalable
Convert your vector icons to icon font.You can use free tools for converting svg icons to icon font.I selected an icon from this app and downloaded the icon font.
Create SAPUI5 application.If you dont know howto refer SAPUI5 application using SAPWebIDE.
From project folder right click on css folder and create fonts folder inside it.
Right click on fonts folder and import our downloaded font files to fonts folder.(I imported .svg,.eot,.ttf,.woff files)
Now project structure will look like this.
Open styles.css and paste below code.

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

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

Now we need to register our icon font to sap.ui.core.IconPool.Paste below code inside Component.js init method or our View1.controller.js's onInit method.

 sap.ui.core.IconPool.addIcon('cool', 'customfont', 'icomoon', 'e900');

Now we can use our custom icon in our application.Paste code in View1.view.xml.

<mvc:View controllerName="customIconFontApp.controller.View1"
 xmlns:html="http://www.w3.org/1999/xhtml"
 xmlns:mvc="sap.ui.core.mvc"
 xmlns="sap.m"
 xmlns:core="sap.ui.core">
 <App>
  <pages>
   <Page title="{i18n>title}">
    <content>
     <core:Icon src="sap-icon://customfont/cool" size="100px" color="blue"></core:Icon>
    </content>
   </Page>
  </pages>
 </App>
</mvc:View>