How to change title of an ion-icon?

user_14683364 0
Viewed 5204

I'm trying to change the ion-icon title that appears on mouse-hover.
Example: pic
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.

ionicons css html
4 Answers

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

user_16406930

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

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

Try the below:

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