How to center a ion-icon inside a ion-item // Ionic 4

Ionic Framework ionic-v3
1

Using Ionic 4 & Angular 7 (latests) i’ve a footer with this code:

<ion-footer translucent="true" class="icon-footer">
  <ion-grid>
    <ion-row>
      <ion-col size="4">
        <ion-item [disabled]="wifiDisable">
            <ion-icon name="wifi"></ion-icon>
        </ion-item>
      </ion-col>

      <ion-col size="4">
        <ion-item [disabled]="locateDisable">
          <ion-icon name="locate"></ion-icon>
        </ion-item>
      </ion-col>
    
      <ion-col size="4">
        <ion-item [disabled]="internetDisable">
            <ion-icon name="planet"></ion-icon>
        </ion-item>
      </ion-col>
    </ion-row>
   </ion-grid>
</ion-footer>

I’ve this result and this problems:

footer-icons
footer-icons.png798×672 35.8 KB

Someone can help me ?

2

Try this:

  <ion-grid>
    <ion-row justify-content-around>
      <ion-col>
        <ion-button expand="block" fill="clear" [disabled]="wifiDisable">
          <ion-icon slot="icon-only" name="wifi"></ion-icon>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button expand="block" fill="clear" [disabled]="locateDisable">
          <ion-icon slot="icon-only" name="locate"></ion-icon>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button expand="block" fill="clear" [disabled]="internetDisable">
          <ion-icon slot="icon-only" name="planet"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
2 Likes
3

uau ! many thanks !
the only fail is backgroud…

footer-icons-bg-fail
footer-icons-bg-fail.png820×468 8.73 KB

i’d like to have same page-background, i’ve tried with class:
HTML

<ion-footer translucent="true" class="tab1-footer">
  <ion-grid>
    <ion-row justify-content-around>
      <ion-col>
        <ion-button expand="block" fill="clear" [disabled]="wifiDisable">
          <ion-icon slot="icon-only" name="wifi"></ion-icon>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button expand="block" fill="clear" [disabled]="locateDisable">
          <ion-icon slot="icon-only" name="locate"></ion-icon>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button expand="block" fill="clear" [disabled]="internetDisable">
          <ion-icon slot="icon-only" name="planet"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

SCSS

.tab1-footer {
  --background: var(--page-background);
}

but…

4

Look at the grid, the row or the col to style…

5

Why don’t you use ion-tabs?

<ion-tabs>
  <ion-tab-bar slot="bottom" color="secondary">

    <ion-tab-button tab="tab2">
      <ion-label>Tab 2</ion-label>
      <ion-icon name="home"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-label>Tab 3</ion-label>
      <ion-icon name="settings"></ion-icon>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>
6

I just have a ion-tabs for routing pages
I have this icons on footer only as status icons…

7

ok solved so:
HTML

<ion-grid class="grid-footer">

SCSS

.grid-footer {
  background-color: var(--page-background);
}