Angular 文本重叠在mat图标按钮上

我正在尝试使用Angular的mat工具栏创建导航栏。我添加了带有mat图标的图标。当我尝试为它们添加标签时，文本与图标重叠。 html:

家
家
历史
家
语言
英语
磨光
意大利人
语言

css:

。示例填充剩余空间{
flex:1自动；
}
.mat图标{
字体大小：25px；
高度：自动！重要；
}
.图标文本{
显示器：flex；
}

这是因为您正在使用

垫图标按钮

mat图标按钮

是一个带有透明背景的圆形按钮，用于包含图标。如果要向此按钮添加文本，请改用

mat按钮

家
家
历史
家

mat按钮

具有

填充：0 16px将伸出
mat工具栏中的按钮
。为了避免这种情况，我们需要覆盖它

。工具栏按钮{
填充：0；
}
您希望文本显示在哪里？例如，按钮图标旁边。此外，我想文本工程作为按钮。