bug(mat-table): sort arrows are disproportionate and have rendering bugs

[FrostKiwi]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The sort arrow is an amalgamation of 3 separate rectangular boxes. As a result this introduces a row of rendering bugs, depending on device, browser, zoom level, dpi etc.

• The arrow does not look the same from column to column, changing appearance between columns
• The arrow loses symmetrical form
  • https://material.angular.io/components/sort/overview:
  • Our case:
• The arrow has a flat top or sometimes even holes where the two rectangles meet in rare cases, on a specific combination of browser, zoom level, dpi etc.

I wish it was rather one single unicode glyph to side-step rendering issues, though I recognize the issue in animating that.

Reproduction

Take a look at the sample in https://material.angular.io/components/sort/overview

Expected Behavior

Arrow should look proportional, as before in 13.x.x

Actual Behavior

Arrow changes proportion from column to column

Environment

Angular CLI: 16.2.10
Node: 21.5.0 (Unsupported)
Package Manager: npm 9.3.0
OS: win32 x64

Angular: 16.2.12
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1602.10
@angular-devkit/build-angular 16.2.10
@angular-devkit/core 16.2.10
@angular-devkit/schematics 16.2.10
@angular/cli 16.2.10
@schematics/angular 16.2.10
rxjs 7.5.7
typescript 4.9.5
zone.js 0.13.3

[tbunique]

Still present in Angular Material 19: https://v19.material.angular.io/components/table/examples#table-overview
Name and Progress have different arrow thickness