將mat-sort-header升/降圖標更改為自定義字體，如真棒插入符/插入符Angular 8

Question

嘗試使用Angular8 /“ @ angular / material”將mat-sort-header默認的升/降圖標更改為自定義圖標（即fontawesome插入符號）：“ ^ 7.3.7”，

不是一個出色的CSS開發人員，它搜索了各種鏈接如何更改角度材質的排序圖標如何 在Angular Material排序標題中創建自定義箭頭不適合我的方案。

任何幫助都會很棒。

Answer 1

您需要display: none對於默認圖標使用的其他圖標display: none 。 然后在選擇器之前使用添加內容作為CSS，並使用內容顯示字體真棒圖標。

[aria-sort="descending"] {
  ::ng-deep .mat-sort-header-arrow {
    .mat-sort-header-indicator {
      &::before {
        content: "<i class='fa fa-caret-down'>...</i>";
        top: -1.0em;
        position: absolute;
      }
    }
  }
}

實時示例： Stackblitz