21

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.

sebaferreras
  • 44,206
  • 11
  • 116
  • 134
Christian Gehn
  • 341
  • 1
  • 3
  • 13

4 Answers4

17

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>
Black Mamba
  • 13,632
  • 6
  • 82
  • 105
Kapil Raghuwanshi
  • 867
  • 1
  • 13
  • 22
13

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>
sebaferreras
  • 44,206
  • 11
  • 116
  • 134
Juxture
  • 253
  • 3
  • 15
4

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
ionic 4 :

 <ion-button (click)="onClick()" fill="clear">
   <ion-icon slot="icon-only" name="home"></ion-icon>
 </ion-button>
Fahimeh Ahmadi
  • 813
  • 8
  • 13
  • 3
    Explanation is needed for submitted codes for further information. – Farbod Ahmadian May 19 '20 at 11:28
  • While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. [From Review](/review/low-quality-posts/26168907) – double-beep May 19 '20 at 18:54