更新到 Angular Material 16 或更高版本即可解决此问题。如果需要继续使用 Angular Material 15,则可以使用以下代码示例解决:
在 HTML 文件中,添加一个父元素来包含需要使用的 mat-icon-button 和 mat-raised-button 元素:
然后在 CSS 文件中,对添加的父元素进行样式设置:
.button-group {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
justify-items: center;
margin-right: 12px;
}
.mat-icon-button {
position: relative;
width: 40px;
height: 40px;
margin-left: -12px;
}
.mat-icon-button .mat-button-wrapper {
height: 40px;
width: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
这样可以确保 mat-icon-button 和 mat-raised-button 能够正确地结合使用,并且能够显示为预期效果。