CODEWITHSUNDEEP
ionic-frameworkionic2ionic3
RIFAL
RIFAL

Reputation: 3627

Custom SVG icon ionic 3 tabs, icon has background color

I make a custom SVG icon on ionic 3 tabs, evrthing works well in browser, but when I tested it on a device or emulator the color become wrong on the background

How to fix this?

ion-icon {
    &[class*="custom-"] {
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    &[class*="custom-donkey"] {
        mask-image: url(../assets/icon/donkey.svg);
    }
    &[class*="custom-cat-ol"] {
        mask-image: url(../assets/icon/cat-outline.svg);
    }
}

pict works on web

pict wrong collor on emulator

Please help I thing from this code

background: currentColor;

Upvotes: 3

Views: 1201

Answers (1)

Praveen Vishnu
Praveen Vishnu

Reputation: 443

&[class*="custom-donkey"] {
        mask-image: url(../assets/icon/donkey.svg);
    }
    &[class*="custom-cat-ol"] {
        mask-image: url(../assets/icon/cat-outline.svg);
    }

instead of Adding The Url/Path of the SVG icon Try to add the SVG Code or You can Directly add the SVG code in bottom menu in HTML and Adjust the Size using CSS Class

Upvotes: 3

Related Questions