How to custom or add icon (svg) to ionic using. [ionic 5]

Ionic Framework Ionic Vue
1

Hello guys, I have a question wanna ask about how to add SVG or png images to be an icon on ionic, please.

expect the result will gonna like this:

<ion-icon slot="icon-only" icon="custom-svg-img" />

2

You can either enter the path to the file in your assets folder (Ionicons Usage Guide: Tips for installing and using the Ionicons free icon library) or use the addIcons Method:

Angular Example:

import { addIcons } from 'ionicons';

...

addIcons({
  'flag-en': 'assets/flags/en.svg',
  'flag-de': 'assets/flags/de.svg'
});
5 Likes
3

Thankful @EinfachHans, I will take a try. If this ok, I will mark this topic as a solution. Thank you so much.

4

I tried it. But doesn’t work, after add svg to main local space in vue. I tried use component in child file *.vue

<ion-icon icon="[add-custom-icon]" />

not showing in webview or phone livereload.

5

I also tried this (in the setup() function) and couldn’t get it to work (Ionic Vue). I can see that asset being is referenced correctly in the web view, but it is trying to load http://localhost:8100/assets/img/dejavu.svg which only returns the SPA index page. No permutations of my path will load anything other than the default server root response (index.html). It’s almost as if SVG’s are not recognized as an asset type, and Ionic is serving the SPA instead, incorrectly. The image shows up if I try to render the same path is a standard img inside a div (@/assets/img/dejavu.svg), but what I need is the icon to show the image. (I noticed that when referencing the image in an image tag that image is preprocessed and given a unique prefix).

6

Hello @metalaureate, Actually I don’t get it what did you mean, sr Bro :joy:

But I used to try many times in many ways. But the final I give up with using the ion-icon component.
Instead of that I just using img tag to mark the icon I wanna push in.

7

Sorry to be unclear. What @EinfachHans said works if you use an external image source reference (e.g. http//www.s3bucket.com/images/…), but if you try to serve the asset out of src/assets/img directory, which is supposed to work (the docs say it will be copied over to the www root), the file path is incorrectly interpreted as an app route, and the Ionic SPA (Single Page Application) is served instead of the image data (producing a blank image).

8

@metalaureate, Just make it simple.
if I use something direction like ‘./assets/images/.svg’ in project file ( this will not work )
else I use something direction like the link https://www….svg’ ( this will work, doesn’t it? )

9

I don’t understand. I need images to be stored locally in the app.

10

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

11

@EinfachHans 2024 and it still working! Thanks u!

.html

<ion-icon slot="icon-only" name="pin"></ion-icon>

.ts

import { Component } from '@angular/core';

import { IonIcon } from "@ionic/angular/standalone";

import { addIcons } from 'ionicons';

@Component({
  selector: 'sample-component',
  templateUrl: './sample-component.component.html',
  styleUrls: ['./sample-component.component.scss'],
  standalone: true,
  imports: [IonIcon]
})
export class ItemIconAndPinComponent {

  constructor() {
    addIcons({
      'pin': 'assets/icons/icon.svg'
    });
  }
}
1 Like