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!

Answer 1

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 .