10

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.

famoha
  • 415
  • 4
  • 12

4 Answers4

9

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

Zam Abdul Vahid
  • 2,389
  • 3
  • 18
  • 25
7

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>
Léo's
  • 79
  • 1
  • 2
  • 2
    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. – maganap May 20 '21 at 16:34
0

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>
Rahul
  • 334
  • 1
  • 8
0

Try the below:

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