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

Similar to @Amuthan 's answer which hides the default display. This code must reside in the global css. It displays carets instead of arrows:

/* in global css document: */
/* this makes it so that sort header arrow is always shown: */
.mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
    opacity: 1 !important;
    color: blue;
    
  }
/* Hide the default sort arrow display: */
.mat-sort-header-stem {
    display: none  !important;
}
.mat-sort-header-pointer-left, .mat-sort-header-pointer-right {
    display: none  !important;
}
.mat-sort-header-pointer-middle{
    width: 0px !important;
    height: 0px !important;
}
/* show two carets on top of each other when not sorted takes place: */
    .mat-sort-header-arrow {
         .mat-sort-header-indicator {
           &::before {
             content: "<>"; 
             position: absolute;
             opacity: 1 !important;
             color:  blue !important;
             font-size: 1.2em;
             font-weight: bold;
             transform: translate(-10%, 20%)   rotate(90deg) !important;
           }
         }
       }

/* show ascending caret when sorted ascending:*/
[aria-sort="ascending"] {
 .mat-sort-header-arrow {
      .mat-sort-header-indicator {
        &::before {
          content: "<"; 
          position: absolute;
          color:  blue !important;
          opacity: 1 !important;
          font-size: 1.2em;
          font-weight: bold;
          transform: translate(0,0) rotate(90deg) !important;
        }
      }
    }
  }
  
 /* show descending caret when sorted descending: */
  [aria-sort="descending"] {
.mat-sort-header-arrow {
      .mat-sort-header-indicator {
        &::before {
          content: ">";
          position: absolute;
          color:  blue !important;
          opacity: 1 !important;
          font-size: 1.2em;
          font-weight: bold;
          transform: translate(0,-10%) rotate(90deg) !important;
        }
      }
    }
  }
  

This is the result: Table header with carets for sorting