Skip to content

bug(Toolbar): toolbar-overrides container-text-color does not set var(--mat-sys-on-primary) to icons #30279

Open
@richardsengers

Description

@richardsengers

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

M2 version

Description

Since we now need to override the toolbar to make use of colors, the mat-icons are always dark, even if we set
:root {
@include mat.toolbar-overrides((
container-background-color: var(--mat-sys-primary),
container-text-color: var(--mat-sys-on-primary)
));
}

or maybe an extra override value to set?
mdc-icon-button-icon-color: var(--mat-sys-on-primary)

Reproduction

Stackblits not working at the moment, but It think it is very easy to repsoduce
https://stackblitz.com/edit/bfyxhb6f-qxwgfzjr?file=src%2Fstyles.scss

Expected Behavior

I would expect all icons to have a var(--mat-sys-on-primary) when set to the toolbar container

Actual Behavior

Image

Should be:

Image

Environment

Angular: 19.0.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package Version

@angular-devkit/architect 0.1900.5 (cli-only)
@angular-devkit/build-angular 19.0.5
@angular-devkit/core 19.0.5
@angular-devkit/schematics 19.0.5
@angular/cdk 19.0.3
@angular/cli 19.0.5
@angular/material 19.0.3
@angular/material-date-fns-adapter 19.0.3
@schematics/angular 19.0.5
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0

Metadata

Metadata

Assignees

Labels

P4A relatively minor issue that is not relevant to core functionsarea: material/toolbar

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions