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