自定义SVG图标ionic 3选项卡，图标具有背景色

Question

我在ionic 3标签上制作了一个自定义SVG图标，在浏览器中效果很好， 但是当我在设备或仿真器上对其进行测试时，背景颜色变得错误

该如何解决？

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);
    }
}

请帮我解决这段代码

background: currentColor;

Answer 1

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

代替添加SVG图标的网址/路径尝试添加SVG代码，或者您可以在HTML的底部菜单中直接添加SVG代码，并使用 CSS 类