Is this usual? Double arrow buttons on iOS

The markup is this:

   <ion-list>
        <button ion-item (click)="detailPage(post);" *ngFor="let post of posts" text-wrap>
            <ion-thumbnail item-left>
                <img [src]="post.thumbnail" *ngIf="post.thumbnail">
            </ion-thumbnail>
            <h2 [innerHTML]="post.title"></h2>
            <h3 [innerHTML]="post.author.name"></h3>
            <div [innerHTML]="post.date"></div>
            <button clear item-right>
                <ion-icon name="arrow-forward"></ion-icon>
            </button>
        </button>
    </ion-list>

Why is iOS showing two arrows? Do I have to target the platform explicitly?

By the way, I have no idea how it shows on actual iOS device, whether the arrows are double or not.

in ios by default an arrow will be there in buttons(mostly when using whole item as button) so you need need not to use the below icon tag
<ion-icon name="any-arrow"></ion-icon> //DO NOT USE IN IOS

you can use the md and wp property to include the arrows in android and windows phone …in this case extra arrow will be removed from ios interface.

use this
<ion-icon md="md-arrow-forward"></ion-icon>

hope it works :slight_smile:

3 Likes

Add
detail-icon=“none” in ion-item

example:-
ion-item detail-icon=“none” ion-item

detail-icon=“none” will remove default arrow icon in Ios and Android

100%it works :slight_smile: