ionic2: Custom SVG Icons

Question

I'm using Ionic2 I want to use my icons as I use Ionic Icons I've seen this link: custom ionic icons

but I Can't Follow the instruction and I can't understand what is the SVG icons, I don't want to make Icons I have Icons as images and I want to use It, can anyone help me!

score 0 · Answer 1 · answered Aug 17 '17 at 08:28

0

You just need to change .svg to .png. Add this to your app.scss file

ion-icon {
    &[class*="appname-"] { 
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    } 
    &[class*="appname-customicon1"] {
        mask-image: url(../assets/img/customicon1.png);
    } 
}

Uses

<ion-icon name="appname-customicon1"></ion-icon>

Credit: adjwilli.

answered Aug 17 '17 at 08:28

Swapnil Patwa

4,069
3
25
37

I have warning that tags: (mask-size, mask-position, mask-repeat and mask-image ) --> [scss] Unknown property – Al-shimaa Adel Aug 17 '17 at 10:01
in app.scss file – Al-shimaa Adel Aug 17 '17 at 11:30
I can't upload image in the comments but it is not an error it is just a warning that scss not know such these tags – Al-shimaa Adel Aug 18 '17 at 14:19
the icon doesn't appear – Al-shimaa Adel Aug 18 '17 at 14:23

ionic2: Custom SVG Icons

1 Answers1