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

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

angular / components