How to override the title "ionicons-v5_logos" when I hover over the github-logo provided by ionic

Question

I'm trying to embed the GitHub Logo by ionic (v5) into my project which redirects to the GitHub repository of the project I made.

The logo has this annoying title "ionicons-v5_logos" which appears when I hover over the icon. How can I remove the logo's title? I've tried to remove the logo's existing title by writing the following code in HTML (but it doesn't seem to remove the title on the ion-icon) -

<ion-icon name="logo-github" title="Check the code"></ion-icon>

I've tried to use the aria-label, aria-hidden and ariaLabel attributes to set/hide the title of the ion-icon, but nothing is working. Can anyone guide me to remove the title for an ion-icon?

Answer 1

You may disable ion-icon popup using CSS event blocking and set "title" property on parent element.

Use:

ion-icon {
  pointer-events: none;
}

Found here: https://github.com/palantir/blueprint/issues/2321

Answer 2

You can try using ion-icon inside ion-button and add the (click) function on ion-button like this:

<ion-button (click)="yourFunction()">
     <ion-icon name="close"></ion-icon>
</ion-button>

You won't see the title on hover anymore.