Styling: Giving an ion-icon a gradient background (ion-chip)

Ionic Framework ionic-v3
1

Hi everyone :slight_smile:

I’m trying to give an icon a gradient background.

I haven’t had any success doing so.

Does anyone have an idea how to do this?

I tried putting the ion-icon into a ion-chip, like this:

<ion-chip class="my-chip">
   <ion-icon name="basket></ion-icon>
</ion-chip

And then in the .css file:

.my-chip{
  color: linear-gradient( 0deg, #color1 0%, #color2 100%) !important;
}

But this didn’t work.
Color one and color two are obviously given in hex code :slight_smile:
Any help would be much appreciated!