Ion iocns gets "cut"

Hi to all reading this.

Okay so here is the problemo I have a ionic 1 app and I have a footer with buttons and in the buttons I have ion icons which gets cut in half but only on IOS android is fine.

So lets get technical :

Here is a screenshot of what I was talking about :

And then here is my code :

<ion-footer-bar class=“bar bar-footer bar-clear” style=“background-color: #eff; max-height: 10%;”>

<div class=“row”>

<div class=“col” style=“text-align: center;”>

<button class=“button button-clear icon-top” ng-click=“goTo(‘app.home’)”>

<i class=“ion-home”></i>

<label>Home</label>

</button>

</div>

<div class=“col” style=“text-align: center;”>

<!-- <button class=“button button-clear icon-top” ng-click=“signOut()”> -->

<button class=“button button-clear icon-top” ng-click=“signOut()”>

<i class=“ion-locked”></i>

<label>Logout</label>

</button>

</div>

<div class=“col” style=“text-align: center;”>

<button class=“button button-clear icon-top” ng-click=“getCall()”>

<i class=“ion-ios-telephone”></i>

<label>Give us a call</label>

</button>

</div>

<!-- <div class=“col” style=“text-align: center;”>

<button class=“button button-clear icon-top” ng-click=“getEmergency()”>

<i class=“ion-medkit”></i>

<label>Emergency</label>

</button>

</div> -->

</div>

</ion-footer-bar>