在 Angular mat-icon 上設置漸變顏色

Question

如何在 mat-icon Angular 上設置漸變顏色？ 我可以在 css 中設置顏色，例如紅色、綠色或任何其他純色 colors，如mat-icon { color: red; } mat-icon { color: red; } 。 但是當嘗試設置像mat-icon {linear-gradient(to right, xxxxxx, #xxxxxx);}這樣的漸變顏色時，它沒有效果。 謝謝：）

Answer 1

您可以將linear-gradient(...)應用於背景：

這將應用背景顏色，並且不會更改實際的圖標顏色：

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

StackBlitz

要為圖標本身應用漸變顏色，您可以執行以下操作：

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將完成更多信息檢查