Ionic is a great UI asset library in cooperation with Angular. Lastly, I stumbled upon an issue where I need to vertically center my <ion-icon> component to the top position. By default, this is centered. Here is how I did it:

<ion-item class="align-items-start" *ngFor="let notification of notifications" (click)="toggleText(notification)">
  <ion-icon size="medium" name="caret-forward-outline" slot="start" color="light" [ngClass]="notification.showText ? 'mt-5 rotate-90' : 'mt-5'"></ion-icon>
  <ion-icon size="medium" slot="end" (click)="Delete(notification)" class="cursor-pointer mt-5" name="trash-outline" color="light"> 
  </ion-icon>
  <strong class="cursor-pointer">{{ notification.title }}</strong>
  <div [innerHTML]="notification.description" class="text-white" *ngIf="notification.showText === true"></div>
</ion-item>

Solution

The solution lies in my "align-items-start" class I've added to the ion-item. Therefore, in my CSS I added:

.align-items-start {
  align-items: start;
}

Because Ion-item is a flexbox element, this works. Cheers!

ionic 5 item slot icon vertically position

 

 

Saved you some valuable time?

Received 100€ so far from 4 kind contributors.