Button with text & image - how to?


#1

I want to create button that wil look like this:

How to make it?

ion-button can’t have image. only text with/or ion-icon.


#2

You could use a <div> to hold the text and image, and put the control logic and button-like styling on the div…

<div Class="fancybutton"  (click)="doSomething()" (swiperight)="doSomethingElse()" >
               <img [src]="imgSource"  scroll="false" width="20%">
               <p> Blah blah blah</p>
 </div>

#3

This solution is without ripple…


#4

I haven’t tried this, but I have an idea:

  1. Use a custom div withs styling to make it pretty, making sure to add tappable attribute

    The text

The tappable attribute is important to remove the 300ms delay otherwise present. Try it out and let us know!


#5

It worked for me, both with click and swipe on the div, but I didn’t try it on a device. I didn’t know about tappable so thanks for the tip - apparently necessary for ios after further review.


#6

Don’t understand the ripple allusion/metaphor/questions…


#7

I realized after reading your answer I basically did yours only without the swipe action :upside_down:
But I thought I’d leave my simplified version in case anyone needed it. But yes, tappable attribute is supposed to remove the 300ms delay otherwise present (ionic removes this on buttons and a tags automatically)