Ionic 3 custom icon + ios 12 display issue

@thiberttravert wrote:

Hi there,

Encountering display issue with custom icon in iOS 12.

I use custom icon like that in app.scss :

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

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

I call my custom icon class like that in my html page :

<ion-icon name="custom-settings" class = "settingsIcon"></ion-icon>

Icon is displayed with border/stroke. Only on ios12. I have spend a lot of times and workaround trying to figure out what is going on. Nothing has fixed this problem.
But I noticed that if i let the default icon-size there is no display issue. When I change the icon size with css class, issue appears…

  .settingsIcon{
    font-size : 32px;
    color : white;
  }

Any help would be much appreciate,
See ya !

Posts: 1

Participants: 1

Read full topic