title: Angular Material mat-icon-button, vertically align text in Ionic
body: <p>I am developing an iOS and Android application using Ionic-Cordova and Angular.</p>
  
  <p>Using the web view to test the app, shows a correct alignment of the Text inside of the button, but when the appplication runs on a mobile( I tested this only on Andorid platform), the Text isn't centered.
  I am using a Custom Font to show images using simple text instead of images.</p>
  
  <p>I tried to modify the css code for the span inside of the button, obtaining the same result... correct displaying on web, and wrong one on the native app.</p>
  
  <p>Some Html code: </p>
  
  <pre><code>&lt;div class="rightBar"&gt;
      &lt;button mat-icon-button class="customFontH right_rightMiddleAlign"&gt;
        K
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>
  .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;
  }
  
  
  </code></pre>
  
  <p>This is how the web view looks like (Correct Result): </p>
  
  <p><img src="https://i.stack.imgur.com/oEahv.png" alt="correct representation"></p>
  
  <p>This is how the native view looks like (Wrong Result):</p>
  
  <p><img src="https://i.stack.imgur.com/ZVthl.jpg" alt="wrong representation"></p>
  
  <hr>
  
  <p>UPDATE 1: </p>
  
  <p>As suggested by @Monomachus, I updated the CSS:</p>
  
  <pre><code>: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;
  }
  </code></pre>
  
  <p>But the issue is still there, the web view is still correct and the native one is still buggy.</p>