Custom Icons with Ionic 5?

Question

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?

Nesbitt

Having exactly same issue, this used to work with Ionic 4, also problem with using "src" attribute is that icons won't appear on IoS version of the application in my case. – Bogoch

Exerlol have you done an absolute url starting with /? – Wertheimer

Answer 1

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>

Carlotacarlotta

You are right, this works now. They must have changed it in a newer ionic version, because I tried the same before and it didn't. We have to remove the .svg though in order to make it work. Maybe you can edit this in your answer. Thanks mate. – Nesbitt

Hi Chris, I am glad it worked for you...mine still works with the .svg , so I'm not sure what's going on, I will keep an eye on it, thanks for the tip. Cheers! – Carlotacarlotta

I did the same but it says file not found. Can you mention where you removed the .svg? – Acuate

Answer 2

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>

Wertheimer

Answer 3

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.

Lushy

Answer 4

you can directly use the custom icon SVG file in the ionic 5. No need to add anything like :

... "assets": [ ... { "glob": "**/*.svg", "input": "src/assets/icon", "output": "./svg" }, ... ] ... use interfaces.

Roughcast

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Swale

Answer 5

This works for me on Ionic 6 / Angular

.html

<ion-icon [src]="sort" class="font-size-60"></ion-icon>

.ts

sort = 'assets/images/svgs/sort.svg';

Infant

Answer 6

I got the accepted answer by TelmaC to work for me eventually but I had a lot of trouble because of a few gotchas that aren't well documented:

• Icons names with underscores don't work ; simply changing the filename (and icon name) from ic_sharer to ic-sharer suddenly fixed the issue for me.
• You need the angular.json copy bits in place as in her answer and if you have ionic serve running already you need to restart it after changing angular.json.
• If you want ionic's colouring and disabled states to work well you need to make sure there is no colour (fill or stroke) in the svg file - ideally no control of stroke-width either.

Ingrid

Answer 7

For someone who is using font awesome type of icon fonts, you may just use class="fa icon". For example:

<ion-tab-button tab="tab1">
  <ion-icon class="fa icon"></ion-icon>
  <ion-label >Inbox</ion-label>
</ion-tab-button>

or if you are using your own icon set, you might use something like:

<ion-icon class="custom-icon icon-edit"></ion-icon>

Committal

You're not using class="fa icon" in your example?? – Meteorite

Thanks for correction. I made my own icon set named "my-icon" as font-awesome is using "fa". – Committal

Where is the font awesome icon in your example? – Houdini

Answer 8

Just implement "FormsModule" in your root module.

Inequitable

Answer 9

You can just add your SVG files to the node_modules/ionicons/dist/ionicons/svg Folder

Jeff

This might technically work, but I would not recommend it. The node_modules folder is by default ignored by version control like git and that for a good reason. Or if you have to update or reinstall npm libs, you will lose your changes. General hint for the future: Try to avoid manipulating content that is managed by package managers to save yourself a lot of trouble. – Nesbitt