Custom SVG icons with Ionic 3 and Ionic 4

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.

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.

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.