Угловой материал мат-значок-кнопка, вертикально выровнять текст в Ionic

Question

Я занимаюсь разработкой приложений для iOS и Android с использованием Ionic-Cordova и Angular.

Использование веб-представления для тестирования приложения показывает правильное выравнивание текста внутри кнопки, но при запуске приложенияна мобильном телефоне (я проверял это только на платформе Andorid) текст не центрируется.Я использую пользовательский шрифт, чтобы показывать изображения, используя простой текст вместо изображений.

Я попытался изменить код CSS для диапазона внутри кнопки, получив тот же результат ... правильное отображение в Интернете инеправильный в нативном приложении.

Некоторый HTML-код:

<div class="rightBar">
    <button mat-icon-button class="customFontH right_rightMiddleAlign">
      K
    </button>
</div>

.rightBar
{
  position: relative;
  float: right;
  width: 50%; 
  height: 100%;
  clear:both;

}

.right_rightMiddleAlign
{

  position: absolute;
  left : 100%;
  top: 50%;

  transform: translate3d(-100%, -50% ,0);

}

.customFontH
{
  font-family: customFontName;
  color: white !important;
  font-size: 150%;
}

:host ::ng-deep span.mat-button-wrapper {
    position: absolute;
    left: 50% !important;
    transform: translate3d(-50%, -50% ,0) !important;
    background-color: purple;
}

Так выглядит веб-представление (правильный результат):

Вот так выглядит собственное представление (Неверный результат):

---

ОБНОВЛЕНИЕ 1:

Согласно предложению@Monomachus, я обновил CSS:

:host ::ng-deep span.mat-button-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    text-align: center;
    display: flex;
    align-items: center;
    align-content: center;
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    background-color: purple;
    line-height: 100%;
}

.customFontH
{
  font-family: farmaH24;
  color: white !important;
  font-size: 150%;
  align-content: center;
  -webkit-align-self: center; /* Safari 7.0+ */
  align-self: center;
}

Но проблема все еще существует, веб-представление все еще корректно, а нативное все еще глючит.