Angular Material Migration to 15 - MatButton and MatIconButton

Question

After Angular Material Migration from 14 to 15 this error appears:

Error: NG0300: Multiple components match node with tagname button: MatButton and MatIconButton

Ideas how this can be fixed?

Answer 1

The reason was using mat-button and mat-icon-button on same element

<button [matMenuTriggerFor]="menu" mat-button mat-icon-button>

To resolve this just use only one.

Answer 2

This can also be an issue if you updated a library which had breaking changes and you messed up the legacy imports.

E.g @angular/material@15 had some breaking changes and renamed their legacy module imports for backward compatibility. So one had to

import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';

Now if you did that on a top level (e.g. app.module.ts or parent.component.ts) and you did it differntly on the child component

import { MatFormFieldModule } from '@angular/material/form-field';

Angular would complain, because there would be ambiguous versions of the imported control.

Answer 3

This was my problem, I had both mat-icon-button and mat-raised-button on a single button.

<button mat-icon-button style="margin-top: 25px" mat-raised-button color="primary" >

When I removed mat-raised-button, its started working again. Thanks to the previous answer!