How can I do the following with the <i> tag?

Ionic Framework ionic-v3
1

I have the following piece of code:

<ion-icon [class.rotate]="option.expanded" class="header-icon icon icon-button-right" [name]="option.iconName || menuSettings.arrowIcon" item-left></ion-icon>

and I need to replace ion-icon for i. How can I do this? I get the following error if I just replace it:

Uncaught Error: Template parse errors:
Can't bind to 'name' since it isn't a known property of 'i'. ("
                    <i [class.rotate]="option.expanded" class="header-icon icon icon-button-right" [ERROR ->][name]="option.iconName || menuSettings.arrowIcon" item-left></i>
                    {{ option.displ"): ng:///AppModule/SideMenuContentComponent.html@22:99
2

What is it that you are trying to do? Do you want to use the <i> element or the <ion-icon> element?

I think the error tells you that name is not a binding for <i> element. https://www.w3schools.com/tags/tag_i.asp the <i> is making the text italic and can’t be used for <ion-icon> if that is what you want to do.

3

it says that name is not a property of i, what’s making it not work is [name]="option.iconName || menuSettings.arrowIcon" but it works with ion-icon

4

Ok but if you look at the link that is sent previously https://www.w3schools.com/tags/tag_i.asp you can see that this is something that makes the text italic, and that it doesn’t have any binding to name defined (binding is something that exists in the angular work and something that exist in pure html). <ion-icon> and <i> are two different tags that doesn’t have the same binds. <ion-icon> enables you to bind something to “name” attribute ([name] is an attribute binding). <i> doesn’t allow you to bind anything to name as it doesn’t need it.

I’m not really sure what you are trying to create here, but if you could describe that then I might be able to help you. I just tried to describe the difference between <i> and <ion-icon>.

Sorry for all the edit, I didn’t realize that tags didn’t show by default :slight_smile:

1 Like
5

Thanks, as I need to this pretty quick for a demo I have for my job, I just did the following for now which works. I’ll need to do it in a more elegant way after of course:

<ion-icon [class.rotate]="option.expanded" class="header-icon" item-left>
      <i [class.rotate]="option.expanded" class="icon icon-button-right" ></i>
</ion-icon>
6

If you just want 2 different icons depending on a state then you could do like in my example below. and “option.expanded” is a true or false boolean.

<ion-icon item-left name="arrow-dropdown" *ngIf="option.expanded"></ion-icon>
<ion-icon item-left name="arrow-dropright" *ngIf="!option.expanded"></ion-icon>

This example will give a arrow down if option.expanded is true and arrow right if option.expanded is false. Hope this helps.

7

Its not that I want 2 icons, it’s that my organization makes me use i insead of ion-icon for some reason that I don’t understand. But now it’s solved more or less

8

Ahh okey, I understand. Then I would do:

<span class="header-icon" item-left>
    <i [class.rotate]="option.expanded" class="icon icon-button-right"></i>
</span>

So you don’t use ion-icon at all. Because in your case you don’t need it I think. It might just do more harm than good.

You should almost only use ion-icon when you are going to use your icon from here https://ionicframework.com/docs/ionicons/ . Then you can get the power from ionic as well.

1 Like