Ionic Angular Tab image-text overlap

Issue

My ionic icon and tabs are overlapping in ios, but not in the web version.

Web version:

IOS version:

Here's the code for the tabs:

.tabs{
    height: 9vh;
}

<ion-tabs>
  <ion-tab-bar class="tabs" slot="bottom">
    <ion-tab-button tab="tab1">
      <!-- <ion-icon name="map-outline"></ion-icon> -->
      <i class="fi-rr-world icons"></i>
      <ion-label>Map</ion-label>
    </ion-tab-button>

    <ion-tab-button (click)="newGroup()">
      <!-- <ion-icon name="add-outline"></ion-icon> -->
      <i class="fi-rr-add icons"></i>
      <ion-label>Create</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2" (click)="calendar()">
      <!-- <ion-icon name="calendar-outline"></ion-icon> -->
      <i class="fi-rr-calendar icons"></i>
      <ion-label>Calendar</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3" (click)="profile()">
      <!-- <ion-icon name="person-outline"></ion-icon> -->
      <i class="fi-rr-user icons"></i>
      <ion-label>Profile</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

I tried increasing the height of the ion-tab div, but that didn't work. Any advice as to how to fix this issue?

Solution

I fixed this issue with some more complex css

Answered By - Darrow Hartman