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

Add class to `` and apply `display: flex; align-items: center` — yurzui, Apr 14 '20 at 05:10
**It does'nt wok** ```
sync_alt
Transfer

``` **and add to your css** ```.vertical-align { display: flex; align-items: center } ``` — doctore, Apr 14 '20 at 05:18
Please create stackblitz to replicate your issue. **It does work for me** — yurzui, Apr 14 '20 at 05:25
https://stackblitz.com/edit/angular-awnnnq?file=src/app/app.component.scss — yurzui, Apr 14 '20 at 05:36

Oded BD · Accepted Answer · 2020-04-14T05:33:51.183

3

<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
}

edited Apr 14 '20 at 05:33

answered Apr 14 '20 at 05:13

Oded BD

2,788
27
30

try now, please – Oded BD Apr 14 '20 at 05:34

Aligning Angular ICON and HTML Text

1 Answers1