I am trying to show both the ascending and descending arrows for an unsorted column.
.mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
opacity: 0.54 !important;
transform: translateY(0px) !important;
}
.mat-sort-header-container:not(.mat-sort-header-sorted)
.mat-sort-header-indicator {
transform: translateY(0px) !important;
}
.mat-sort-header-container:not(.mat-sort-header-sorted)
.mat-sort-header-pointer-left {
transform: rotate(-45deg) !important;
}
.mat-sort-header-container:not(.mat-sort-header-sorted)
.mat-sort-header-pointer-right {
transform: rotate(45deg) !important;
}
This is my current css which just shows the single arrow
The below CSS might help you, we use the pseudo selectors :after to display the icon with the content set as '↑↓'
.mat-sort-header-container:not(.mat-sort-header-sorted):after {
content: '↑↓';
backface-visibility: hidden;
height: 15px;
width: 15px;
position: absolute;
top:0px;
right:0px;
}
.mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
visibility: hidden;
}
.mat-sort-header-container:not(.mat-sort-header-sorted)
.mat-sort-header-indicator {
transform: translateY(0px) !important;
}
.mat-sort-header-container:not(.mat-sort-header-sorted)
.mat-sort-header-pointer-left {
transform: rotate(-45deg) !important;
}
.mat-sort-header-container:not(.mat-sort-header-sorted)
.mat-sort-header-pointer-right {
transform: rotate(45deg) !important;
}
Stackblitz Demo