Custom SVG icons with Ionic

Ionic developed the Ionicons library that contains many icons that you can use in your Ionic application. But no icon library contains icons for every use case, and sometimes you want to include SVG icons from other libraries.

After you bootstrapped the application with the Ionic CLI, copy the SVG files into the src/assets folder. It also works when you create a subfolder in the assets directory and copy the resources there.

In the template you can then reference SVG icons with the src property of the ion-icon component. Specify the correct path to the SVG file and the component displays the icon.

 <ion-icon src="assets/mobile.svg"></ion-icon>

Like in Ionic, you can display icons on buttons.

  <ion-button>
  <ion-icon slot="start" src="assets/point-left.svg"></ion-icon>
  Left Icon
  </ion-button>

  <ion-button>
  Right Icon
  <ion-icon slot="end" src="assets/point-right.svg"></ion-icon>
  </ion-button>

  <ion-button>
    <ion-icon slot="icon-only" src="assets/mobile.svg"></ion-icon>
  </ion-button>
  <ion-button>
    <ion-icon slot="icon-only" src="assets/qrcode.svg"></ion-icon>
  </ion-button>
  <ion-button>
    <ion-icon slot="icon-only" src="assets/spades.svg"></ion-icon>
  </ion-button>

Styling with SCSS and CSS works as usual.

  <div margin-top>
    <ion-icon class="big" src="assets/mobile.svg"></ion-icon>
    <ion-icon class="big" src="assets/qrcode.svg"></ion-icon>
    <ion-icon class="big" src="assets/spades.svg"></ion-icon>
  </div>

  <div margin-top>
    <ion-icon class="bigger" src="assets/mobile.svg"></ion-icon>
    <ion-icon class="bigger" src="assets/qrcode.svg"></ion-icon>
    <ion-icon class="bigger red" src="assets/spades.svg"></ion-icon>
  </div>

ion-icon {
    &.big {
      width: 50px;
      height: 50px;
    }
  
    &.bigger {
      width: 100px;
      height: 100px;
    }
  
    &.red {
      color: red;
    }
}

You can even embed the SVG directly into the ion-icon component with the src property.

<ion-icon src='data:image/svg+xml;utf8,<svg version="1.1" xmlns="https://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M384 0h-288c-17.6 0-32 14.399-32 32v448c0 17.6 14.399 32 32 32h288c17.6 0 32-14.4 32-32v-448c0-17.601-14.4-32-32-32zM240 488.891c-13.746 0-24.891-11.145-24.891-24.891s11.145-24.891 24.891-24.891 24.891 11.145 24.891 24.891-11.145 24.891-24.891 24.891zM384 416h-288v-352h288v352z"></path></svg>'></ion-icon>

You find the source code for this example on GitHub: https://github.com/ralscha/blog/tree/master/customicons4