Align label to right of icon

Question

I have the following list of ion-item with some ion-label misaligned

<ion-list id="sidenav">
      <ion-item>
          <ion-icon name="home" item-left></ion-icon>
          <ion-label>Home</ion-label>
      </ion-item>
      <ion-item>
          <ion-icon name="logo-usd" item-left></ion-icon>
        <label>Financeiro</label>
      </ion-item>
      <ion-item>
          <ion-icon name="construct" item-left></ion-icon>
          <ion-label>Instalação</ion-label>
      </ion-item>
      <ion-item>
          <ion-icon name="log-out" item-left></ion-icon>
        <ion-label>Sair</ion-label>
      </ion-item>
</ion-list>

How do I leave the ion-label of each ion-icon left aligned red line?

I want everyone to be the same way as Financial

Answer 1

This is because of the varied size of the icons. An adjustment you can make is the following:

In the file "app.scss" add the following code:

.item ion-icon[item-left] {
  width: 24px;
}