Some svg icons don't show in device

Ionic Framework ionic-v3
1

I am importing svgs by adding them in the app.scss like below:

ion-icon {
    &[class*=ic-] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
        &[class*="ic-check"]{mask-image: url(../assets/img/svg/check.svg); }
        &[class*="ic-copy"]{mask-image: url(../assets/img/svg/copy.svg); }
        &[class*="ic-edit"]{mask-image: url(../assets/img/svg/edit.svg); }
}

rendering them in html like so:


        <ion-icon padding margin name="ic-check"></ion-icon>

the problem is in chrome browser all the icons show up, but on device some icons go missing and the space is left blank.

How can I resolve the issue and is there a better way to import svg icons?

2

Hello,
the paths must seen from www folders index.html and into this folder copied content. At development with browser you have also an asset folder in src and if paths point to this, then it is on browser working. On app or your files uploaded to production server this folder does not exist.

Best regards, anna-liebt

1 Like