Align mat-icon in a label

Question

I need help aligning a mat-icon next to text in a label

Html:

<label>
    <mat-icon>warning</mat-icon>
    Warning
</label>

Css:

label {
    font-size: 0.6rem;
    font-family: Verdana, sans-serif;
    border-radius: 15px;
    padding: 5px;
    font-weight: bold;
    background-color: red;
    color: black;
    text-transform: uppercase;
}

mat-icon {
    transform: scale(0.5);
}

This is how it looks like now:

Answer 1

You can use flexbox css :

<label>
    <mat-icon>warning</mat-icon>
    <span>Warning</span>
</label>

label {
    font-size: 0.6rem;
    font-family: Verdana, sans-serif;
    border-radius: 15px;
    padding: 5px;
    font-weight: bold;
    background-color: red;
    color: black;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

mat-icon {
    transform: scale(0.5);
}