Ionic Ion-Button icon-only

Question

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.

score 17 · Answer 1 · edited Jul 12 '21 at 17:13

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>

edited Jul 12 '21 at 17:13

Black Mamba

13,632
6
82
105

answered Mar 07 '19 at 19:19

Kapil Raghuwanshi

867
1
13
22

score 13 · Accepted Answer · edited Oct 02 '17 at 07:50

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>

edited Oct 02 '17 at 07:50

sebaferreras

44,206
11
116
134

answered Oct 02 '17 at 07:46

Juxture

253
3
15

score 4 · Answer 3 · answered Feb 20 '19 at 08:38

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

answered Feb 20 '19 at 08:38

Ngọc Lương

89
5

score 1 · Answer 4 · answered May 19 '20 at 11:00

1

ionic 4 :

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

answered May 19 '20 at 11:00

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

Ionic Ion-Button icon-only

4 Answers4