What does the <i> tag mean in this angular bootstrap example?-CodePudding

I was looking through another stackoverflow post when I noticed some syntax I was not familiar with and could not google the answers to. Can anyone point me to some documentation for how the <i> tag is used here and what is it called? "Interactive"? I have only ever known <i> to mean italics, which is not what's happening here.

<accordion >
    <accordion-group [isOpen]="isAssignedTasksVisible" >
        <div  accordion-heading (click)="toggleAssignedTasks()">
            <strong >Ready for Review (2)</strong>
            <i 
                   [ngClass]="{'fa-chevron-down': isAssignedTasksVisible, 'fa-chevron-up': !isAssignedTasksVisible}"
                   aria-hidden="true"></i>
        </div>
        ... 
    </accordion-group>
</accordion>

Here is the original post: ng2-bootstrap accordion how to create interactive dropdown arrow

CodePudding user response：

< i > was the tag for italics, but nowadays, in the way you're using it (with , is used for Icons.

There're several ways to use it, but when you see somehing like <i fa stands for FontAwesome.

FontAwesome is a famous gallery of icons (and other graphics) Here you have access to the free galery: https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free

In order to use some icon, you only have to get its name. For instance, the second icon of that list, the icon of accesibility, you would use it in that way:

<i ></i>

You only have to click in the icon you like, and it opens a page when the web itself shows the exact way to use the icon (in the way as I show you above), along with other ways to use it (filled, flat, larger, etc).

EXTRA: Dynamic selection of the icon with ngClass

In your example, beside the i for icon, has the peculiarity that the second parameter that i needs, is being set dynamically with [ngClass].

For instance, whereas a 'regular' icon is in that way:

<i ></i>

Your code is putting actually all these icons:

<i ></i> // If the isAssignedTasksVisible variable is true
<i ></i> // If the isAssignedTasksVisible variable is false

It does so thanks to [ngClass], in this part of the code:

[ngClass]="{'fa-chevron-down': isAssignedTasksVisible, 'fa-chevron-up': !isAssignedTasksVisible}

NOTE: Hi folks! I see in the comments that it creates controversy xD, but I'm just saying how it's used nowadays by most developers on the front end, please, don't kill the messenger! xD So that if you see it in the code, you know what it is being used for and you don't have the doubt that the OP @wheeeee had, which is precisely a very common doubt because of the "double use" that is given to that <i tag and that you are emphasising in the comments. Have nice and see you around!