ionic svg-icons - change background color

Asked Nov 14 '19 at 09:38

Active Nov 14 '19 at 09:38

Viewed 360 times

I use svg-icons in an app and the question is if it is necessary to put icons in different colors there or if I can set a color by code. Here is my approach:

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-mobile"] {
    background: url(../assets/mobile.svg);
  }


}

view:

<ion-item>
      <ion-icon name="custom-mobile"></ion-icon>
</ion-item>

I change the color of background in the class-part but no effect on view.

asked Nov 14 '19 at 09:38

Micha

Does this answer your question? [How to change the color of an svg element?](https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element) – Sebin Benjamin Nov 15 '19 at 18:25
I will use parts of it - thanks! – Micha Nov 15 '19 at 19:59

ionic svg-icons - change background color

0 Answers0