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

Based on @amuthan solution I came up with this, it's the same arrow as dropdown uses, and it also shows up when hovering:

.mat-sort-header-arrow[style] {
  .mat-sort-header-stem {
    display: none;
  }
  .mat-sort-header-indicator {
    opacity: 1;
    color: black;
    font-weight: bold;

    .mat-sort-header-pointer-left, .mat-sort-header-pointer-right, .mat-sort-header-pointer-middle  {
      display: none;
    }
  }
}
.mat-sort-header-indicator {
  &::before {
    content: "";
    top: 0.1em;
    position: absolute;
    color: $primary;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid;
    margin: 0 4px;
    transform: rotate(180deg);
    opacity: 0.6;
  }
}


[aria-sort="ascending"] {
  .mat-sort-header-arrow {
    .mat-sort-header-indicator {
      &::before {
        top: 0.1em;
        transform: rotate(180deg);
        opacity: 1;

      }
    }
  }
}

[aria-sort="descending"] {
  .mat-sort-header-arrow {
    .mat-sort-header-indicator {
      &::before {
        top: -0.6em;
        transform: rotate(0);
        opacity: 1;
      }
    }
  }
}