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

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?



Solution 1:[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

Solution 2:[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.

Solution 3:[3]

I have an answer! You can go to the releases of Ionicon on GitHub (https://github.com/ionic-team/ionicons/releases?page=2) and see that v5.2.0 has added title.You can use older versions. You can import v5.1.2 (for better results) by eliminating 5.5.2 in the installation script (that you added in your project for using Ionicons).

//Use this code

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>

<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Krzysztof Lamorski
Solution 2 Harshit Rastogi
Solution 3 Boss