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

### 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

Reproduce the behavior by comparing the v16 and current Angular Material button overview pages in Chrome, focusing on adjacent mat-icon-buttons and their hover and click targets. Trace the MatIconButton touch-target behavior from the button component entry point, then verify that neighboring buttons no longer overlap and that each click activates the intended button.

索引モデルが issue の本文から書いたものです。