Question

我正在尝试使用Angular的mat-toolbar创建导航栏。我添加了带有mat-icon的图标。当我尝试为其添加标签时，文本与图标重叠。 screen of the toolbar 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中的按钮。为了避免这种情况，我们需要添加css来覆盖它。

.toolbar-button {
    padding: 0;
}

文字在mat-icon-button上重叠

1 个答案: