Ionic has provided us with most of the icons that can be used for the development of our project or any sort of application. But there is the limitation to the icons provided by this framework. Most of us might want to use some other glyph-icons or self-designed icons. Before adding the customize icons, one needs to be clear that the icons are actually represented by the font.  The steps that need to be followed to add your own custom icons in ionic can be given as:
First to generate the font of the desired icon:

• One can simply create their own icon using Adobe Illustrator or Photoshop.
• Then the icon created by the user must be converted into SVG (Scalable Vector Graphics, an XML-based vector image format for two-dimensional graphics ) format. There are many online sites for the conversion purpose. Or one can simply pick SVG from the platform called "The Noun Project". This platform contains thousands of icons that one could think of.
• The SVG is then converted into a font that is easily understood by the browser. For this purpose, there are many application. The one that I prefer is "Icon Moon". With the help of this application, we can simply import the SVG icon and generate the zip format of the desired font. Else we can also get the zip file of the font of available SVG.
• When we download the zip file we can see various files and folders, the only needed files are style.css and font file. The rest of the file can be neglected.

Second to generate SCSS:

• The next step to follow is to add font files to src/assets/fonts, then rename the style.css file to icons.scss and add it under src/theme.
• Open recently added icons.scss
  • Add ../assets/ to every path generated by iconmoon:

For example:  from: url(‘/fonts/icomoon.eot?y9riq4’);

                 to:  url('../assets/fonts/icomoon.eot?y9riq4');

Add following code into icons.scss:

For this case, I've simply added a customized gold coin.

.icon-Money:before {
  content: "\e900";
}
@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{
      content: $val;
      font-size: 26px;
    }
  }

  @include makeIcon(icon-Money, '\e900')

Here, mixin can simply be defined as something that receives a set of arguments and outputs some CSS code and can simply be represented in a single line of code as shown above.

• Open variable.scss and add

  @import "ionicons";
  

  along with

  @import "ionic.ionicons";
  

  Doing so helps us to use both the pre-defined icons as well as customized icons.

• Open app.scss and add

  @import "../theme/icons"

  Now, write the following code in HTML page

    <ion-icon name="icon-Money"></ion-icon>
  

  Screenshot of the output can be given as:

  

   

Get your SVG

Icon Moon