0
votes

Trying to Change mat-sort-header default ascending/descending icon to custom icon(i.e 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.

enter image description here

Any help would be great.

1

1 Answers

2
votes

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