CODEWITHSUNDEEP
ionic-frameworkionic4
Raj
Raj

Reputation: 59

ionic 4 how to add svg icon dynamically like- {title: 'About', url: '/about' , icon:'person'}

{title: 'About', url: '/about' , icon:'person'} like this how to add custom svg icon

{title: 'mobile', url: '/about' , icon:'custom-mobile'}

ion-icon { &[class*="custom-"] { mask-size: contain; mask-position: 50% 50%; mask-repeat: no-repeat; background: currentColor; width: 1em; height: 1em; }

&[class*="custom-mobile"] { mask-image: url(../assets/mobile.svg); } } ---tried this also, not working in ionic 4---

Upvotes: 1

Views: 2382

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

It's not very clear where you're talking about using it but the IonIcons has documentation about 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 <img src="..."> 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.

So the snippet would look like this:

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

And if you want to do it dynamically its like this:

<ion-icon [src]="variablewithimagepath"></ion-icon>

Upvotes: 2

Related Questions