How to add custom icons to ion-icons in ionic-v4

Ionic Framework
1

Alongside excellent ion-icons I would like to use my own. I have them both as SVG and also as an icon font (done using icomoon.io online font builder).

Important to me is to make my icons adhere to the theme (using color defaults) but also be stylable with specific colors (using color attribute)

in ionic-v3 it was done using css+font. In ionic-v4, I am told (on ionic slack forum, by mike) icon font is no longer an option. Suggestion is to use src attribute just so:

<ion-icon src="/path/to/external/file.svg"></ion-icon>

The problem with it, besides being less elegant then just using the ‘name’ attribute is styling - it does not react to color attribute. I tried it.

Options that I considered are

  1. forking ion-icon repo. I hate it because I want downstream fixes
  2. forking font awesome angular control. Not good because I want the same attributes as ion-icon
  3. as above, except wrapping into something e.g. div that uses ionic styling. doable but a gut feeling there must be a better solution

Ideally, IMHO, ion-icon should be split into a web component for any set of gliphs adhering to certain principles (e.g. naming, that will make switching between ios and mg easy), AND a separate extendable set of icon glyphs.

Mike suggested I do a pull request. Before I do so, I would like to hear your opinions.

2 Likes
2

Then something isn’t quite right, because I’ve done the above and have used it with differing colors. It works as expected.

I actually tried the SVG font-generation route initially and used IcoMoon App - Icon Font, SVG, PDF & PNG Generator to generate it. It detected several issues with the assets I was uploading and I ended up manually editing the SVG files directly to make sure that:

  1. All of the internal styles are removed
  2. Only paths remaing
  3. Removing the “preview”

This resulted in SVG files that were much smaller and after getting them to play nicely with IcoMoon, I started using them as directed in the docs and they began working as expected. You might have to play with the viewbox some if you’re having positioning problems.

Good luck!

1 Like
3

check this link