CODEWITHSUNDEEP
htmlcsssassionic2ionic3
J. Hesters
J. Hesters

Reputation: 14786

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.

Upvotes: 3

Views: 3251

Answers (1)

VICTOR
VICTOR

Reputation: 1942

You should use background-image

In your .css file, 

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

Upvotes: 2

Related Questions