bug(m3Theme) Missing options in mat.icon-button-color

[markusahrweileramcon]

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

However, there are no built-in styles targeting these classes
Because of this decision, the developers need to create tons of lines of code which brings back the old bahavior to color the buttons.

So my styles are bloated with

    .mdc-button {
        &.mat-secondary {
            @include mat.button-color($theme, $color-variant: secondary);
        }

        &.mat-tertiary {
            @include mat.button-color($theme, $color-variant: tertiary);
        }

        &.mat-error {
            @include mat.button-color($theme, $color-variant: error);
        }
    }

    .mdc-fab {
        &.mat-secondary {
            @include mat.fab-color($theme, $color-variant: secondary);
        }

        &.mat-tertiary {
            @include mat.fab-color($theme, $color-variant: tertiary);
        }
    }

    .mat-mdc-icon-button {
        &.mat-secondary {
            @include mat.icon-button-color($theme);
        }

        &.mat-tertiary {
            @include mat.icon-button-color($theme);
        }

        &.mat-error {
            @include mat.icon-button-color($theme);
        }
    }

But as you can see, I cannot use the color variant in the icon-button, so it only generated the same style 3 times

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

create all 3 color variants of the icon button

Actual Behavior

X [ERROR] No argument named $color-variant.
   ┌──> apps\x\frontend\src\m3-theme.scss
207│             @include mat.icon-button-color($theme, $color-variant: secondary);
   │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
   ╵
   ┌──> node_modules\@angular\material\button\_icon-button-theme.scss
41 │ @mixin color($theme) {
   │        ━━━━━━━━━━━━━ declaration
   ╵
  apps\x\frontend\src\m3-theme.scss 207:13  color()
  apps\x\frontend\src\m3-theme.scss 207:13  components-colors()
  apps\x\frontend\src\styles.scss 11:5      root stylesheet [plugin angular-sass]

    angular:styles/global:styles:2:8:
      2 │ @import 'apps/x/frontend/src/styles.scss';
        ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Environment

Angular CLI: 18.0.2
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

Angular: 18.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.2
@angular-devkit/build-angular   18.0.2
@angular-devkit/core            18.0.2
@angular-devkit/schematics      18.0.2
@angular/cli                    18.0.2
@schematics/angular             18.0.2
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}