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?

Porridge

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

Stilu

Note: That also prevents (click) events from working. – Dundee

It isn't preventing my click events. Works great! – Affiant

its preventing click event as well – Aorangi

Wrap the icon in a div and assign that div the click functionality to make pointer-events: none work without blocking click events. – Liqueur

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.

Ornelas

Answer 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>

Kutuzov