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

回答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>

回答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>

回答3:

in Angular.json:

 {"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.

回答4:

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>

回答5:

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

来源：https://stackoverflow.com/questions/60286018/custom-icons-with-ionic-5

标签

ionic-framework

ionic4

ionic5