Ionic - ion-item text is not vertically centered when ion-icon is bigger

Actually Ionic does that to you. But you need to inform where the elements will be with item-start, item-end, etc.

Just set your code like this:

<ion-item>
    <ion-icon item-start name="ion-ios-clock-outline" class="icon"></ion-icon> 
    Recent
</ion-item>

Try this. Add a <span> element to the text, vertical-align only works with elements inline side by side :

CSS

.icon {
 display: inline-block;
 font-size: 35px;
 color: #ffC977;
 vertical-align: middle;
}

.text{
  display: inline-block;
  vertical-align: middle;
}

HTML

<ion-item>
  <ion-icon class="icon ion-ios-clock-outline"></ion-icon> 
  <span class="text">Recent</span>
</ion-item>