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:
Add e.g.ios-my-custom-icon.svg and md-my-custom-icon.svgin 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?
27 Answers
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>
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>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.
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></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></ion-icon>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.
1Just implement "FormsModule" in your root module.
You can just add your SVG files to the node_modules/ionicons/dist/ionicons/svg Folder
1
