Search code examples
htmlcssionic-frameworkionic7

Ionic - Changing line-height of ion-button

How to change the line-height of an ion-button?

The documentation doesn't provide any guidance on this.

I've tried various selectors without success:

.row-button ion-button
.row-button ion-button button
.button-native
button

Other properties are applied correctly, but it doesn't work for "line-height." It only applies when I manually edit the style on the button within the #shadow-root.

<ion-row class="row-button ion-justify-content-center">
  <ion-col>
    <ion-button expand="full">
      <ion-icon name="logo-whatsapp" size="large" slot="start"></ion-icon>
      Get in touch for more information
    </ion-button>
  </ion-col>
</ion-row>

Is there a way to adjust the line-height of the ion-button using CSS or a custom class?

Solution

  • Try to add the below css

    ion-button::part(native){line-height: 50px;}