angulartypescriptionic-frameworkionic4ionic5

Custom Icons with Ionic 5?

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: Ionic 4: Custom Icons Made Simple

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?

Solution

  • 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

    Cheers

    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>