[Table] Sort arrows are not rendered properly in tabs

Bug, feature request, or proposal:

BUG Plunker: https://plnkr.co/edit/Idc73Kn0ViLI4Qpsp98g?p=preview

When you set your sort by default as ASC or DESC like that:

@ViewChild(MatSort) mdSort: MatSort;

ngOnInit() {this.mdSort.start = 'desc';}

The arrow is just ugly ( 2 times on 3 ). If you click again on the sort icon, it’s pretty 😃

BTW: Under IE11 it’s always ugly. Same issue or not I don’t know

What is the current behavior?

What is the expected behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.3 OS: Windows 7 Pro 64 bits TS: 2.4.1 Material: 2.0.0-beta.11 Browser: Chrome V60

Is there anything else we should know?

Nothing #

[Barbiero]

Hey,

While we wait for 6.0 to come out of beta, I’ve figured a workaround. I force the arrows to be transformed into the expected state on SCSS, so that they don’t look ugly when loading the table the first time. Any hover over the arrows will override this workaround, so the default behavior won’t be affected:

::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
    opacity: 0;
}

::ng-deep .mat-sort-header-pointer-left.ng-trigger.ng-trigger-leftPointer{
    transform: rotate(-45deg);
}
::ng-deep .mat-sort-header-pointer-right.ng-trigger.ng-trigger-rightPointer{
    transform: rotate(45deg);
}

[alexciesielski]

Still an issue on Angular 5.2.2 and Material 5.1.0