文本在 mat-icon-button 上重叠

Question

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

<mat-toolbar color="warn">
    <mat-toolbar-row>
        <img src="/assets/img/logo.png" width="150">
        <span class="example-fill-remaining-space"></span>
        <button mat-icon-button>
            <mat-icon>home</mat-icon>
            <span>home</span>
        </button>

        <button mat-icon-button>
            <mat-icon>history</mat-icon>
            <span>home</span>
        </button>

        <span>
            <mat-menu #appMenu="matMenu">
                <span>language</span>
                <button mat-menu-item>ENGLISH</button>
                <button mat-menu-item>POLISH</button>
                <button mat-menu-item>ITALIAN</button>
            </mat-menu>
            <button mat-icon-button [matMenuTriggerFor]="appMenu">
                <mat-icon>language</mat-icon>
            </button>
        </span>
    </mat-toolbar-row>
</mat-toolbar>

CSS：

.example-fill-remaining-space {
    flex: 1 1 auto;
}

.mat-icon {
    font-size: 25px;
    height: auto !important;
}

.icon-text {
    display: flex;
}

Answer 1

这是因为您正在使用mat-icon-button. mat-icon-button是一个具有透明背景的圆形按钮，旨在包含一个图标。如果您想向此按钮添加文本，请使用mat-button。

<button mat-button class="toolbar-button">
    <mat-icon>home</mat-icon>
    <span>home</span>
</button>

<button mat-button class="toolbar-button">
    <mat-icon>history</mat-icon>
    <span>home</span>
</button>

mat-button默认情况下padding: 0 16px;，它将拉伸 中的按钮mat-toolbar。为了避免这种情况，我们需要覆盖它。

.toolbar-button {
    padding: 0;
}