将 mat-sort-header ascending/descending 图标更改为自定义字体，如 font-awesome caret-down/caret-up Angular 8

Question

尝试使用 Angular8/"@angular/material": "^7.3.7",

不是很好 css 开发者通过各种链接搜索 Creating custom arrow in Angular Material sort header 不符合我的场景。

任何帮助都会很棒。

Answer 1

您需要对用于默认图标的其他图标进行 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

将 mat-sort-header ascending/descending 图标更改为自定义字体，如 font-awesome caret-down/caret-up Angular 8

Change mat-sort-header ascending/descending icon to custom like font-awesome caret-down/caret-up Angular 8

font-awesome

angular-material

angular

mat-table