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: 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?

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. — Exerlol, Feb 20 '20 at 12:58

Telma C. · Accepted Answer · 2020-04-08T12:49:42.423

8

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>

edited Apr 08 '20 at 12:49

answered Apr 03 '20 at 08:38

Telma C.

356
2
6

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. – Chris Apr 03 '20 at 14:03
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! – Telma C. Apr 03 '20 at 16:44
I did the same but it says file not found. Can you mention where you removed the .svg? – Ramsha Khalid Apr 04 '20 at 14:34

score 7 · Answer 2 · answered Feb 29 '20 at 23:44

7

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>

answered Feb 29 '20 at 23:44

rtpHarry

13,019
4
43
64

score 3 · Answer 3 · edited Jun 08 '21 at 05:57

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.

score 1 · Answer 4 · answered Apr 01 '22 at 06:49

1

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.

answered Apr 01 '22 at 06:49

prasad

11
2

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](/help/how-to-answer). – Community Apr 01 '22 at 10:00

score 1 · Answer 5 · answered Oct 04 '22 at 16:06

1

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';

answered Oct 04 '22 at 16:06

Sampath

63,341
64
307
441

JaMondo · Answer 6 · 2020-11-26T14:29:44.963

0

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>

edited Nov 26 '20 at 14:29

answered Nov 18 '20 at 03:13

JaMondo

278
2
8

You're not using `class="fa icon"` in your example?? – Joep Beusenberg Nov 20 '20 at 11:39
Thanks for correction. I made my own icon set named `"my-icon"` as font-awesome is using `"fa"`. – JaMondo Nov 26 '20 at 14:29
2

Where is the font awesome icon in your example? – MadMac Mar 28 '21 at 23:27

score -2 · Answer 7 · answered Apr 09 '22 at 00:56

-2

Just implement "FormsModule" in your root module.

answered Apr 09 '22 at 00:56

Diego Martìnez

26
2

score -5 · Answer 8 · answered Jan 12 '21 at 02:43

-5

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

answered Jan 12 '21 at 02:43

Dinamiko

1

7

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. – Chris Jan 12 '21 at 03:20

Custom Icons with Ionic 5?

8 Answers8

Cheers

Linked