CODEWITHSUNDEEP
angularangular-material
Mehran
Mehran

Reputation: 1003

Set gradient color on Angular mat-icon

How can I set gradient color on mat-icon Angular? I can set the color in css e.g., red, green, or any other solid colors like mat-icon { color: red; }. But when trying to set to a gradient color like mat-icon {linear-gradient(to right, xxxxxx, #xxxxxx);} it has no effect. Thanks:)

Upvotes: 0

Views: 3066

Answers (1)

yazan
yazan

Reputation: 537

You could apply linear-gradient(...) to the background:

This will apply a background color and will not change the actual icon color:

mat-icon {
  color: white;
  background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
}

StackBlitz

To apply a gradient color for the icon itself you could possibly do the following:

mat-icon {
  background: -moz-linear-gradient(top, #e72c83 0%, #a742c6 100%);
  background: -webkit-linear-gradient(top, #e72c83 0%, #a742c6 100%);
  background: linear-gradient(to bottom, #e72c83 0%, #a742c6 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

StackBlitz

-webkit-text-fill-color will do the trick for more info check

Upvotes: 2

Related Questions