CODEWITHSUNDEEP
angularangular-materialfont-awesomemat-table
Karthigeyan Vellasamy
Karthigeyan Vellasamy

Reputation: 2066

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

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.

Upvotes: 1

Views: 6352

Answers (1)

Md Rafee
Md Rafee

Reputation: 5530

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

Upvotes: 3

Related Questions