How to make a button with icon?

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

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-title>Some title</ion-title>
    <ion-buttons end>
      <button ion-button (click)="someThingLikeLogOut()">
        <ion-icon name="log-out"></ion-icon>


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?


thank you that helped!


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