How to make an icon itself behave like a button?


#1

I have an icon heart on the nav bar inside a button element but the problem is when I click it, the whole button area gets animated.

Check out the SS.

https://gyazo.com/89252c30ebe2541c4b42fbafd61521f9

I want that When i click on it only the heart icon gets clicked not the area around it.
Please help thanks.


#2

Use ion-icon tag only instead of button and add a click event on the ion-icon tag

<Ion-icon (click)="tapevent()" tappable></ion-icon>

#3

You can also add the attribute “ion-button”


#4

Sorry guys its not working :frowning:


#5

please help, its not accepting tap event now.


#6

dont flood in forum, please


#7

Create a codepen or plunker. We cannot help you with no code.