How to change title of an ion-icon?

Question

I'm trying to change the ion-icon title that appears on mouse-hover.
Example:
I've tried for at least a couple of hours to find a solution for this. I just don't know how i can access the title element of ion-icon via css to be able to change the content of it to 'Edit' instead of 'Create'. Any help would be appreciated.

Outlander

Answer 1

You may try disabling ion-icon popup using CSS event blocking and set "title" property on to a parent element.

CSS

ion-icon {
 pointer-events: none;
}

Or you can create Icon element using the below code as a workaround and set it on a button.

const icon = <Icon icon='arrow-right' title={false} />;
return <Button minimal icon={icon} title='Next' />;

Details here - https://github.com/palantir/blueprint/issues/2321

Selfoperating

Answer 2

disable events:

ion-icon {
    pointer-events: none;
}

and wrap icon with span tag using title attribute:

<span title="Edit" style="font-size: x-large;">
  <ion-icon name="create"></ion-icon>
</span>

Modiolus

I had to add line-height: 0 to the span to avoid icon alignment problems, since my icon was smaller than the default line height. Simple solution, thanks. – Steel

You can directly disable events inside the <ion-icon> tag by using style as follows: <ion-icon name="create" style="pointer-events: none;"></ion-icon> – Isauraisbel

Answer 3

Ionic 5 - Just wrap it in a div like below:

<div (click)="presentActionsPopover($event, obj)" slot="end" title="Actions" size="small">
      <ion-icon name="ellipsis-vertical-outline" slot="icon-only"></ion-icon>
    </div>

Vauban

Answer 4

Try the below:

<ion-button title="Create Project">
<ion-icon  name="create"></ion-icon>
</ion-button>

Viscose