Home | Send Feedback

Custom SVG icons with Ionic 3 and Ionic 4

Published: January 06, 2018  •  Updated: December 01, 2018  •  ionic3, ionic4, javascript

Ionic developed the Ionicons library that contains a lot of 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.

Ionic 3

For this example I downloaded three icons (mobile.svg, qrcode.svg and spades.svg) from the https://icomoon.io library.

To make them accessible from an Ionic 3 app, copy the files into the src/assets folder.
Then open the file src/app/app.scss and add this rule.

ion-icon {
  &[class*="custom-"] {
    mask-size: contain;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    background: currentColor;
    width: 1em;
    height: 1em;
  }

  &[class*="custom-mobile"] {
    mask-image: url(../assets/mobile.svg);
  }
  &[class*="custom-qrcode"] {
    mask-image: url(../assets/qrcode.svg);
  }
  &[class*="custom-spades"] {
    mask-image: url(../assets/spades.svg);
  }

}

The name does not have start with custom-. You can choose any prefix.

With this SCSS rule in place you can display the icons in your app, like the icons from the Ionicons library, with the ion-icon tag.

<ion-icon name="custom-mobile"></ion-icon>
<ion-icon name="custom-qrcode"></ion-icon>
<ion-icon name="custom-spades"></ion-icon>

When you have a lot of icons you can optimize this by embedding the SVG code directly into the SCSS file. The browser then only needs to load one CSS file instead of requesting each SVG file individually.

To convert an SVG file into a dataurl you add the prefix data:image/svg+xml;utf8, and copy and paste the SVG code after the comma.

&[class*="custom-embeddedmobile"] {
 mask-image: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}
&[class*="custom-embeddedqrcode"] {
 mask-image: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}
&[class*="custom-embeddedspades"] {
 mask-image: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

Screenshot


Source: https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36

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

Ionic 4

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 3 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>

Screenshot41


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;
    }
}

Screenshot4


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="http://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