Override aria-label of ionic3 ion-icon

I'm testing out the accessibility of my my Ionic3 app using iOS' VoiceOver capability. It looks like ion-icon uses the name of the icon in its aria-label attributes and is read out loud. Is there a way to either override it with something else or suppress the aria-label for icons?

Example...

I have a button like this:

<button ion-button icon-right>
    Finish my postcard 
    <ion-icon name="checkmark-circle"></ion-icon>
</button>

Which gets read out loud using VoiceOver as "Finish my postcard checkmark circle".

Similarly for tabs:

<ion-tab [root]="tab3Root" tabTitle="Postcards" tabIcon="images"></ion-tab>

Gets read out loud as "Images outline postcards"

In both of these cases, it would be preferable to just not announce the name of the icon at all. However, it would be nice to know how to override it with custom text as well.

Solution

According to the ionicons compontent documentation, you can simply overwrite the aria-label:

<ion-icon name="checkmark-circle" ariaLabel="Completed"></ion-icon>

Since you're showing a check mark next to something that sounds like a task, I'm assuming the icon is actually carrying important information: The task is completed. So you shouldn't hide that information from screen reader users.