css - Ionic 3でアイコンをテキストに垂直に揃えます

Question

Ionic アイコンをテキストに正しく配置し、垂直方向の中央に配置しようとしていますが、それができません。avg-rating次のようにフレックスレイアウトを使用して、内部のコンテンツを整列させようとしています:

<ion-content padding>
  <ion-card>
    <img src="assets/imgs/restaurant.jpeg" />
    <ion-card-content>
      <div class="title">
        <ion-card-title>
          Title
        </ion-card-title>
        <div class="avg-rating">
          <h2>4,5/10</h2>
          <ion-icon name="star"></ion-icon>
        </div>
      </div>
    </ion-card-content>
  </ion-card>
</ion-content>

そして、これは私のSASSです：

.avg-rating {
  display: flex;
  align-items: center;
  h2 {
    margin-bottom: 0;
  }
}

ここでわかるように、アイテムは整列していません。私は CSS と Web アプリでの作業に慣れており、これは常に機能しますが、ここでは期待どおりに機能していないようです。私が間違っていることについて何か考えはありますか？ありがとう。