I recently updated from Ionic 4 to Ionic 5. With Ionic 5 the icons received an update too. Apparently however also the mechanism loading the icons changed.
In Ionic 4 it was possible to add custom icons like this: https://medium.com/@JordanBenge/how-to-create-custom-ionic-4-icons-af80cc6cc148
Add e.g. ios-my-custom-icon.svg and md-my-custom-icon.svg in an icon folder in the assets. Then it was necessary to reference them in the angular.json like:
... "assets": [ ... { "glob": "**/*.svg", "input": "src/assets/icon", "output": "./svg" }, ... ] ...
and one could finally call them like the other ion-icons in html:
<ion-icon name="my-custom-icon"></ion-icon>
However this does not work in ionic 5 anymore. Does someone know, how we can now implement custom icons in ionic 5?
EDIT: I realised it is still possible to call them through the src attribute like
<ion-icon src="assets/icon/md-my-custom-icon.svg"></ion-icon>
However that is not convenient like using the name attribute. Any chance we have some equivalent to the above?
Grab your icon, and put it in your custom-ion-icons folder. Next, you'll have to name them appropriately. Each version of the icon must be named with their platform name preceding the icon name.
To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as <img src="..."> in that the url must be accessible from the webpage that's making a request for the image.
You need to remove the md-
from the icon name.
For example, your icon is md-my-custom-icon.svg
Change to my-custom-icon.svg
. After that the custom icons will work again on ionic 5
UPDATE
I had to put the md-
back on the icon name and actually add the md-
to the ion icon tag as below. This way it uses my custom icon and not the default one.
<ion-icon name="md-my-custom-icon"></ion-icon>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With