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

Question

Trying to Change mat-sort-header default ascending/descending icon to custom icon(ie fontawesome caret-down) using Angular8/"@angular/material": "^7.3.7",

Not a great css developer searched through various links How to change angular material sort icon Creating custom arrow in Angular Material sort header Didn't fit my scenario.

Any help would be great.

Answer 1

you need to make display: none to other icons that are used for default icon. then use add content as CSS before selector and use content to show your font awesome icon.

[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;
      }
    }
  }
}

Live Example: Stackblitz