Search code examples
androidionic-frameworkmobileionic2hybrid

How can I design the Ionic button with symbols on the right side?


I am using a following simple ionic button with blue background and white label. But I need the one with oval-shaped and with the symbols at the right. I have attached both of the images (the button which I am using now & the button which I need actually). How can I design the button according to that, Since I am new to Ionic.

I have attached my coding and images:

My HTML snippet for currently using button:

<ion-item>
<div>
<button ion-button name="submitbutton" (click)="submitforget()" tabindex="3" #submitbutton class="submitbutton">SUBMIT</button>
  </div>
  </ion-item>

My CSS for current button:

.submitbutton{
    text-align: right;
    vertical-align: right;

}

My Actual button:

image of actual button:

But I need the button as below:

image of button actually needed


Solution

  • There is default button widget in ionic.

    Try below code

    <button ion-button icon-end>
    Right Icon
    <ion-icon name="star"></ion-icon>
    </button>
    

    You can find more Here