Custom Icons with Ionic 5?

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>


in Angular.json:

"assets":[
   {
      "glob":"**/*",
      "input":"src/assets",
      "output":"assets"
   },
   {
      "glob":"**/*.svg",
      "input":"node_modules/ionicons/dist/ionicons/svg",
      "output":"./svg"
   },
   {
      "glob":"**/custom-*.svg",
      "input":"src/assets/icon_custom",
      "output":"./svg"
   }
]

And now start your custom svg icons whith "custom-..." in icon_custom (for example) folder.


You could always just use [] and then provide a variable if you prefer:

const myCustomIcon = "/assets/icons/custom.svg";

And in the markup:

<ion-icon [src]="myCustomIcon"></ion-icon>