Значок Mat не совпадает с span с элементом mat-list-item

Question

У меня есть sidenav, который я пытаюсь стилизовать, и я хотел бы иметь красивые ссылки, которые включают в себя как текст, так и значки.

Проблема в том, что я использую mat-icon Кажется, он совпадает с промежутком, который я имею с правой стороны от него. Два элемента выровнены, однако значок сам по себе выровняет выравнивание.

Поскольку эти два элемента фактически выровнены, единственное, что я мог сделать, это попытаться вытолкнуть sh вниз по тексту span, используя margin, однако я действительно не хочу этого делать, если не обязан.

Что я могу сделать, чтобы решить проблему с выравниванием?

<div class="d-flex align-items-center justify-content-center color-white nav-bar-item">
    <a mat-list-item class="nav-bar-item">
        <mat-icon class="ml-3 icon-height">{{icon}}</mat-icon>
        <span class="ml-3">{{name}}</span>
    </a>
</div>

.nav-bar-item {
    height: 75px;
}

.color-white{
    color: white;
}