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 https://github.com/angular/components/pull/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?