bug(MatSelect): arrow-transform override does not work if component has no label

[PriyankaSPX]

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

For a MatSelect without a MatLabel present, the select override --mat-select-arrow-transform is not applied, as the CSS transform field is overridden by transform: none.

https://screenshot.googleplex.com/8m8x9LWnqXgGJyW

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-ehh29ebf?file=src%2Fmain.ts
Steps to reproduce:

1. Create a mat-select
2. Do not add a mat-label
3. Apply style override arrow-transform in styles

Expected Behavior

The arrow to be transformed (in the StackBlitz example, both form fields should have the arrow rotated 180 degrees).

Actual Behavior

The arrow transform is only applied if a mat-label is present, as seen in the StackBlitz - the first mat-select has the transform applied, the second does not.

Environment

• Angular: 19.0.0
• CDK/Material: 19.0.0
• Browser(s): Google Chrome 140.0.7339.80 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Linux

[ok7sai]

Currently without a label the selector does not apply override with token https://github.com/angular/components/blob/main/src/material/select/select.scss#L98-L100

We have a discussion about this, and there are a couple options

• Providing a new token like --mat-select-arrow-no-label-transform, or
• If the desired behavior is changing the arrow direction when the popup is opened, then we can probably change the existing behavior instead.
• As a workaround, using ng-deep to overwrite the style(less ideal).