bug(button): mat-icon-button vs mat-button hover inconsistency

[blogcraft]

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

I have a Tool Bar with 3 icons, 2 mat-icon-button and one mat-button:

When Hovering, the background color is different and inconsistent.

mat-button hover has a hint of the theme color:

mat-icon-button only has some opacity with a state layer color that ignores the theme.

Why this inconsistency?

Reproduction

StackBlitz link: Could not make one
Steps to reproduce:

1. Create a
2. Inside create a mat-button and a mat-menu-item
3. Icons are optional

Expected Behavior

I expect the same behaviour for both buttons.

Actual Behavior

They have different hover background colors.

Environment

• Angular: 18.1.0
• CDK/Material: 18.1.0
• Browser(s): MS Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[crisbeto]

Should be resolved by #29433.

[blogcraft]

Just updated to 18.1.1 and the inconsistency remains exactly the same.

[crisbeto]

What does your markup look like? You might also have to add the same color attribute on both of the buttons.

[blogcraft]

I am not using the color attribute. I'm using the m3 theme without the color-variants-backwards-compatibility.

<mat-toolbar class="header">
   <mat-toolbar-row class="mat-elevation-z6 sticky-top">
     <button mat-icon-button (click)="onMenuClick()" matTooltip="Menú">
       <fa-icon
         [icon]="faBars"
         class="inline-flex text-lg align-top"
         [fixedWidth]="true" />
     </button>
     <button
       mat-button
       [matMenuTriggerFor]="menuUsuario"
       matTooltip="{{ nombreUsuario | titlecase }}">
       <fa-icon
         matMenuItemIcon
         [icon]="faCircleUser"
         [fixedWidth]="true"
         class="text-xl align-middle" />{{ nombreUsuario | titlecase }}
     </button>
   <button mat-icon-button [matMenuTriggerFor]="theme" matTooltip="Tema">
     <fa-icon
       [icon]="faPaintBrush"
       class="inline-flex text-lg align-top"
       [fixedWidth]="true" />
   </button>
   </mat-toolbar-row>
 </mat-toolbar>

And my styles.scss

@use "@angular/material" as mat;
@use "sass:map";

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");

@import "./themes/m3-theme.scss";

@include mat.core();

@mixin app-theme($theme) {
  @include mat.all-component-themes($theme);
  @include mat.system-level-colors($theme);
  @include mat.system-level-typography($theme);
  // @include mat.color-variants-backwards-compatibility($theme);

  .accent {
    color: mat.get-theme-color($theme, secondary);
  }

  @include mat.progress-bar-color($theme, $color-variant: tertiary);
  @include mat.progress-spinner-color($theme, $color-variant: tertiary);

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  ::-webkit-scrollbar-thumb {
    background: mat.get-theme-color($theme, outline);
    border-radius: 2px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: mat.get-theme-color($theme, outline-variant);
  }
}

html {
  .app-light-theme {
    @include app-theme($light-theme);
  }

  .app-dark-theme {
    @include app-theme($dark-theme);
  }

  @media (prefers-color-scheme: light) {
    .app-auto-theme {
      @include app-theme($light-theme);
    }
  }

  @media (prefers-color-scheme: dark) {
    .app-auto-theme {
      @include app-theme($dark-theme);
    }
  }
}

[crisbeto]

I'd have to look into it more, but I suspect that you'll have to use the color backwards compatibility, because by default icon buttons don't have a color in M3 while regular buttons take the primary color.

[blogcraft]

Thanks for the response. Is that behaviour by design or just something that will be fixed? Cause our aim is to use the native m3 theme and not use a compatibility layer and avoid having to set the color atribute everywhere.

[crisbeto]

It's by design in that Material design doesn't support the primary/accent/warn variations in Material 3 anymore. We'll likely maintain support for the backwards-compatibility mixins for a long time though.

[blogcraft]

In that case shouldn't mat-button also not use by default the primary color if there is no color property?

And if you see in my examples I don't use and don't expect to use de color attribute.

But if I use the these buttons as-is (without color) at least shouldn't they look the same? Including ripple, active, hover, etc?

[wagnermaciel]

@crisbeto Seems like this fell off you radar

@blogcraft Some context here - The styles for our components is not decided by us. We follow the specification described on https://m3.material.io/ which is a separate team / project

[crtbndpgm]

In @component decorator:

styles:

    ` 
    mat-toolbar {
        @include mat.toolbar-overrides((
        container-background-color: var(--mat-sys-primary),
        container-text-color: var(--mat-sys-on-primary),
        ));
    }

    [mat-icon-button] {
      --mat-icon-color: var(--mat-sys-on-primary);
      --mat-icon-button-state-layer-color: var(--mat-sys-on-primary);
    }

The above works.

I did, at first, try to do an override in my @component style, but it just would not seem to take affect, like it was ignored.

From Chrome Dev tools: within the mat-icon-button element, you will find a span

<span class="mat-mdc-button-persistent-ripple mdc-icon-button__ripple">
::before
</span>

With this style:

.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {
    background-color: var(--mat-icon-button-state-layer-color, var(--mat-sys-on-surface-variant));
}

I copied it to my style in the @component, and changed to the --mat-sys-on-primary var

.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {
    background-color: var(--mat-icon-button-state-layer-color, var(--mat-sys-on-primary));
}

It would not work, and would not even show in dev tools.