How to change angular material sort icon

Question

I need to change default arrow icon from angular material matSort to a custom arrow.

The current code

Answer 1

@Artur

You can try this

[aria-sort='ascending'] {
  ::ng-deep .mat-sort-header-arrow{
    .mat-sort-header-indicator {
      &::before{
        font: normal normal normal 1.1rem/1 FontAwesome;
        content: "\f0d7";
        position: absolute;
        top: .2rem;
      }
    }
  }
}

[aria-sort='descending'] {
  ::ng-deep .mat-sort-header-arrow { 
    .mat-sort-header-indicator {
      &::before{
        font: normal normal normal 1.1rem/1 FontAwesome;
        content: "\f0d8";
        position: absolute;
        top: -.9rem;
      }
    }
  }
}