Aligning Angular ICON and HTML Text

Question

Here is my HTML code

<div class="transfer-link" *ngIf="showTransferLink" qa-name="transfer-link">
      <a routerLink="/Transfers">
        <mat-icon>sync_alt</mat-icon>
        <div>
          Transfer
        </div>
      </a>
    </div>
  </div>

Here is my scss code

 @media (min-width: 320px) and (max-width: 768px) {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid $color-gray-light;
        flex-direction: row;

        div[role='button'] {
          flex-direction: row;

          .mat-icon {
            margin-right: 0.5rem;
            font-size: 1.5rem;
            height: 1.5rem;
            width: 1.5rem;
          }
        }
      }

I am trying to align my Icon next to my Transfer

This is what I currently have

---

This is what I want to accomplish

Answer 1

<div class="transfer-link vertical-align" *ngIf="showTransferLink" qa-name="transfer-link">
      <a class="vertical-align" routerLink="/Transfers">
        <mat-icon>sync_alt</mat-icon>
        <div>
          Transfer
        </div>
      </a>
    </div>
  </div>

and add to your css

.vertical-align {
    display: flex; 
    align-items: center
}