Text overlaps on mat-icon-button

Question

I'm trying to create navbar with Angular's mat-toolbar. I've added icons with mat-icon. When i tried to add labels for them, the text overlaps with the icons. 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

This is because you are using mat-icon-button. mat-icon-button is a circular button with a transparent background, meant to contain an icon. If you want to add text to this button, use mat-button instead.

<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 has padding: 0 16px; by default which will stretch out the buttons in mat-toolbar. To avoid this we need to override it.

.toolbar-button {
    padding: 0;
}