Currently working on an Angular 5 project and I'm looking to implement a custom sort icon in the header. The goal is to achieve a similar effect to this example, without using the default arrow.
I attempted to modify the CSS styles, but it wasn't successful. Is there a way to replace the default icon with a custom one using JavaScript?
::ng-deep {
.cdk-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.mat-sort-header-stem {
background: none;
display: none !important;
}
.mat-sort-header-container {
position: relative;
}
.mat-sort-header-indicator {
transform: translateY(0px) !important;
}
.mat-sort-header-arrow {
position: absolute;
right: 20px;
transform: translateY(0%) !important;
}
}
Any suggestions are greatly appreciated.
Edit.
If anyone else is facing this issue, I was able to resolve it by adding a custom directive to the mat-sort-header element. Additionally, I passed the sort direction (ASC or DESC) to the directive. Finally, based on the direction, I customized the sort icon using only CSS.