Ionic Ion-Button icon-only

17
votes

I'm very new in Ionic2 or Ionic at all. I set up a new project and want to design a small menu at the bottom of the foot of my page. I didn't do anything else on this project and trying to imitate the steps of a tutorial video. but when I use the icon-only directive on a button the background of the button only becomes a bit smaller. The background doesn't disappear. 

<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <button ion-button icon-only>
      <ion-icon name="home"></ion-icon>
    </button>
    <button ion-button icon-only>
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-toolbar>
</ion-footer>

Here's my code. I hope you can help me.

4
ionic2ionic3

4 Answers

14
votes

Adding a clear attribute should give the result you want if i understand correctly:

<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <button ion-button icon-only clear>
      <ion-icon name="home"></ion-icon>
    </button>
    <button ion-button icon-only clear>
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-toolbar>
</ion-footer>
14
votes

For Ionic 4 - <ion-button fill="clear">

You can use the fill property now, e.g:

<ion-button (click)="onClick()" fill="clear">
      <ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
3
votes

For Ionic 4: 

...
    <ion-button (click)="onClick()">
      <ion-icon slot="icon-only" name="home"></ion-icon>
    </ion-button>
...

You can go to this link for more references https://ionicframework.com/docs/api/button

1
votes
ionic 4 :

 <ion-button (click)="onClick()" fill="clear">
   <ion-icon slot="icon-only" name="home"></ion-icon>
 </ion-button>