how can I insert own svg icons into ionic 6?

Question

Hello how are you? I've been trying to insert my own icons into svg for days, I've seen several blogs but they don't work for me. I'm using ionic version 6.12.2. Does anyone know how I can insert my own svg icons?

Answer 1

I'm using Sass properties to handle my icons.

In my styles folder, I have a class like _icons-svg.scss , and a class named _mixins.scss

In my _icons-svg.scss :

.icon-svg {
  height: 46px;
  width: 46px;
  background-size: 100% 100% !important;
  &.my-first-svg {
    @include svg-icon('my-first-svg-icon');
    height: 22px;
    width: 12px;
  }
  &.my-second-svg {
    @include svg-icon('my-second-svg-icon');
    height: 22px;
    width: 12px;
  }
...

And in my _mixins.scss file, I have:

@mixin svg-icon($icon-name) {
  background: url('src/assets/icons/svg/' + $icon-name + '.svg') no-repeat;
}

So replace in the url by the folder containing your svg files. So my svg file looks like this in my svg folder:

my-first-svg-icon.svg
my-second-svg-icon.svg

And then on my HTML I just have to call like this:

<div class="icon-svg my-second-svg"></div>

Answer 2

Using a SASS mixin was a common way to do this in Ionic 3, but in Ionic 4/5 it's much much simpler. Like you can see in the Ionicons docs :

Custom icons

To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.

<ion-icon src="/path/to/external/file.svg"></ion-icon>

So for example you can put your own icons folder in the assets folder, like this:

src
  |- app
  |- ...
  |- assets
      |- icons
          |- user.svg
          |- ...

Which can be used then like this:

 <ion-icon src="assets/icons/user.svg"></ion-icon>