Repository navigation
ion-icon without a label is exposed as an image with no name #1518
Description
Current behaviour
ion-icon always renders role="img" on its host. When no aria-label is given, which is the usual
case for an icon next to text, screen readers meet an image with no name. axe reports this as
role-img-alt. One app we scanned had 54 of these across three pages.
Apps can add aria-hidden="true" to each decorative icon, but that is easy to miss, and the default is
the inaccessible case.
Steps to reproduce
- Add
<ion-icon name="logo-github"></ion-icon>to a page, with noaria-label. - Inspect the accessibility tree: the icon is an image with no name.
- Or run axe's
role-img-altrule.
Seen with ionicons 8.0.13. icon.tsx on main renders role="img" on the host the same way.
Expected behaviour
An ion-icon with no aria-label or aria-labelledby is hidden from assistive technology, as Angular
Material's mat-icon does by default.
Possible fix
Set aria-hidden="true" on the host when neither aria-label nor aria-labelledby is present, and
leave role="img" for labelled icons.
Related: #710 and #838 (closed), about labels being forced.
Happy to open a PR for this if you'd like one.
Activity
DuncanFaulkner commentedon Oct 29, 2026
Hi, a follow-up on this. We're publishing a short report in the week of 16 November on accessibility findings across nine open-source Angular projects. Its Libraries section lists this issue under Ionicons, with a link, as a fix that would help every app using the library. It only describes the issue as filed. If you'd rather Ionicons wasn't named, say so here by 10 November and we'll describe it as "a third-party icon library" with no link. Happy to open a PR for it.