How to avoid to cut the icons?

Ionic Framework Ionic Angular
1

Hello,

I’m using Ionic 5 and don’t know how to avoid this problem:

error_cut_icons

Thank you

My code is:

<ion-card>
    <ion-card-header class="ion-text-center">
      <ion-card-title>What is _______________?</ion-card-title>

    </ion-card-header>
    <ion-card-content>
      <div [innerHTML]="infoTSA"></div>
      <ion-grid>
        <ion-row class="ion-text-center">
          <ion-col>
            <ion-text>
              <h3>Contact Us 24/7</h3>
            </ion-text>
            <ion-fab horizontal="center">
              <ion-fab-button size="small" (click)="sendEmail()" color="primary">
                <ion-icon name="mail"></ion-icon>
              </ion-fab-button>
            </ion-fab>
          </ion-col>
          <ion-col>
            <ion-text>
              <h3>Website</h3>
            </ion-text>
            <ion-fab horizontal="center">
              <ion-fab-button style="width: 40px; height: 40px;" 
              (click)="goToWebsite()" size="small">
                <img style="width: 24px; height: 24px;" src="assets/website.png">
              </ion-fab-button>
            </ion-fab>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card-content>
  </ion-card>
2

Give your container more height. It’s cutting off because its currently too small.

3

I just want to make the ion card as much big as to include the icons, but don’t know the right way

4

maybe add some padding/margin?

5

I did it, at the end I set up with css “minimum height” on the ion-card

6

Remove the Ion-fab , just use the ion-fab-button , and to make them center add class to ion-col or you may also wrap in a div and make it center.

Issue is because of ion-fab

7

Was solved already, thanks :wink: