angular - 文本在 mat-icon-button 上重叠

Question

我正在尝试使用 Angular 的 mat-toolbar 创建导航栏。我添加了带有 mat-icon 的图标。当我尝试为它们添加标签时，文本与图标重叠。 screen of the toolbarHTML:

<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; 默认情况下会拉伸(stretch) mat-toolbar 中的按钮。为避免这种情况，我们需要覆盖它。

.toolbar-button {
    padding: 0;
}