bug(MatIconButton): Touch Targets are overlapping each other when placed side by side

[matthias-dev]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16.2.14

Description

Placing two mat-icon-buttons side by side just like the angular material doc pages does results in overlapping touch targets. And the user clicks the wrong buttons. v16.2.14 (of the docs):

v18.1.2 (of the docs):

Reproduction

Just open the https://v16.material.angular.io/components/button/overview page and compare the button touch target behavior when moving the mouse over the icon buttons with the one of the current version https://material.angular.io/components/button/overview

Expected Behavior

Icon-Buttons should be separated clearly for the user, and no overlapping should occur.

Actual Behavior

Even though the mouse pointer is clearly over another button, the neighboring button is already displayed as hovered and is executed when clicked.

Environment

• Angular: 18.1.2
• CDK/Material: 18.1.2
• Browser(s): Chrome 127.0.6533.73
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[amysorto]

For context, the difference is that in v16 the icon button is 48x48px while now it is 40x40px. The reason for that change was that this was a change in the Material specs for M3 icon buttons. Despite that, the touch target remains 48x48px for better accessiblity. Unfortunately this means sometimes touch targets overlap.

Although I'll leave this issue open since it would be ideal if this experience can be improved here.