Custom SVG Icons - RC2, RC3

Ionic Framework ionic-v3
1

Hello,
I would like to use custom icons, up to RC1 I worked with ng2-inline-svg,
but since the version RC2 the module works no longer :confused:
Does someone have an alterantive?
Or how do you use custom SVG icons?

:relaxed:

2

Hello, it may be not the best solution, but it works.
I needed to use a single svg custom icon in my project so I created a @Component and put svg code inside template.

import { Component } from '@angular/core';
@Component({
selector: 'icon-chip',
templateUrl: 'icon-chip.html'
})
export class IconChip {
  constructor() { }
}

So, in my icon-chip.html template file:

<svg ....>

</svg>

to use it

<icon-chip></icon-chip>

Regards

1 Like
3

Thank you,
but I have over 30 different icons and I don’t want to create a own component for each icon.
The icons should be very easy to maintain and interchangeable

4

Hi - it would be overkill to use components for an SVG.
Best would probably be to just create a class (either in the page/component’s .scss file where you are planning to use it, or in the global app scss file), and then call the SVG from that class.
Or, if you don’t want to use a class, for whatever reason, pop the SVG’s code (it’s just text) into a DIV container and place it where you want. The class of course would have the advantage of being reusable over and over. Hope this helps.

5

If I use the svg in a class, I can not control the properties like color, font size etc via css

6

That should work – SVG just uses different parameters, have you read here?


Let me know if it works

7

yes this would work, but i don’t want to have the real <svg></svg> in my code…
i would prefer a dynamic component whilch should like this:<my-icon [icon-name]='home' class="myClass"'></my-icon>
and this component should load the content of the icon home which has the information from the

1 Like
8

Hi again, Tobiaspix,

you can do so in many ways… principally you can just treat a .svg file like a normal picture and call the .svg file from your .scss (inline code works as well, but you said you’d not prefer that). Have a look here for a few examples:

Good luck