Custom tab icon turns to black square on android simulator

[philippspinnler]

I’m using custom icons in the tabs. Everything is working fine in the browser with --lab. In the ios simulator it works as well. Only in the android simulator I get black squares if the tab is active. Any idea?

css:

ion-icon {
  &[class*="icon-"] {
    mask-size: contain;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    background: currentColor;
    width: 1em;
    height: 1em;
    mask-image: url(../assets/icon/svg/Symptome.svg);
  }
  &[class*="icon-symptoms"] {
    mask-image: url(../assets/icon/svg/Symptome.svg);
  }
  &[class*="icon-oils"] {
    mask-image: url(../assets/icon/svg/Oel.svg);
  }
  &[class*="icon-mixtures"] {
    mask-image: url(../assets/icon/svg/Mischung.svg);
  }
  &[class*="icon-others"] {
    mask-image: url(../assets/icon/svg/Weitere.svg);
  }
  &[class*="icon-uses-internal"] {
    mask-image: url(../assets/icon/svg/Einnehmen.svg);
  }
  &[class*="icon-uses-external"] {
    mask-image: url(../assets/icon/svg/Ausserlich.svg);
  }
  &[class*="icon-uses-inhale"] {
    mask-image: url(../assets/icon/svg/Inhalieren.svg);
  }
  &[class*="icon-uses-dilute"] {
    mask-image: url(../assets/icon/svg/Verdunnen.svg);
  }
  &[class*="icon-country"] {
    mask-image: url(../assets/icon/svg/Land.svg);
  }
  &[class*="icon-plant"] {
    mask-image: url(../assets/icon/svg/Pflanze.svg);
  }
  &[class*="icon-arrow-left"] {
    mask-image: url(../assets/icon/svg/minimal-left.svg);
  }
}

[robinyo]

See: https://robferguson.org/blog/2018/04/09/theming-your-ionic-3-app-bespoke-svg-icons/

ion-icon {

  &[class*="fa-"] {
    mask-size: contain;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    background: currentColor;
    width: 1em;
    height: 1em;
  }
  
  ...

  &[class*="fa-fal-map-marker"] {
    mask-image: $fal-map-marker;
    .tab-button[aria-selected=true] & {
      mask-image: $fas-map-marker;
    }
  }
  &[class*="fa-fas-map-marker"] {
    mask-image: $fas-map-marker;
  }
  
  ...
  
}