CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic4ionic5
Chris
Chris

Reputation: 4386

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

Upvotes: 27

Views: 37819

Answers (9)

Elemental
Elemental

Reputation: 7466

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.

Upvotes: 0

Sampath
Sampath

Reputation: 65860

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

Upvotes: 1

Diego Mart&#236;nez
Diego Mart&#236;nez

Reputation: 24

Just implement "FormsModule" in your root module.

Upvotes: -3

prasad
prasad

Reputation: 11

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.

Upvotes: 1

Alex Don
Alex Don

Reputation: 31

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.

Upvotes: 3

Dinamiko
Dinamiko

Reputation: 1

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

Upvotes: -7

JaMondo
JaMondo

Reputation: 304

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>

Upvotes: -1

Telma C.
Telma C.

Reputation: 366

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>

Upvotes: 8

rtpHarry
rtpHarry

Reputation: 13125

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>

Upvotes: 7

Related Questions