How to make a button with icon?

Ionic Framework ionic-v3
1

Hello
I want to give each page of my app a button on nav bar top right, the button should be a heart icon which when clicked becomes active. How do I achieve this? Please help thanks.

1 Like
2

Hi,
With Ionic, this is quite tricky because it uses both material design on Android and standard on iOs.
Usually what you do, is something like that to have a top right icon in the navbar:

<ion-header>

  <ion-navbar>
    <ion-title>Some title</ion-title>
    <ion-buttons end>
      <button ion-button (click)="someThingLikeLogOut()">
        <ion-icon name="log-out"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

As long as you have that example, you can use another icon, style it for example with the .scss file of the template. Not sure if this answer your question?

3 Likes
3

thank you that helped!

2 Likes
4

you’re welcome :slight_smile: i forgot to tell if you want to have a look at icons available, check the list here on ionicons (then use name="" any in the list, it’s built in with Ionic):

1 Like