Search code examples
htmlcsssassionic2ionic3

Styling in Ionic 3.x: Ion-Icon with gradient background colour (ion-chip)

I'm trying to give an icon a gradient background. How can I do that?

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.

Solution

  • You should use background-image

    In your .css file, 

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