How to properly place and interact with fontawesome icons?

Question

css

How to correctly place fontawesome icons (so as not to double in the code)?
For example:

<div class="item inline-content gradebook-icon">
    <i class="fal fa-award" data-content-url="<%= gradebook_sidebar_path %>" title="Submissions and Grading"></i>
    <i class="fas fa-award" data-content-url="<%= gradebook_sidebar_path %>" title="Submissions and Grading"></i>
  </div>
<div class="item inline-content conversations-icon">
    <i class="fal fa-comments-alt" data-content-url="<%= conversations_path %>" title="Chat"></i>
    <i class="fas fa-comments-alt" data-content-url="<%= conversations_path %>" title="Chat"></i>
  </div>
<div class="item inline-content comments-icon">
     <i class="fal fa-comment-dots" data-content-url="<%= side_bar_comments_path %>" title="Comments"></i>
     <i class="fas fa-comment-dots" data-content-url="<%= side_bar_comments_path %>" title="Comments"></i>
  </div>

Initially, only the icon with the fal class is visible, and when you click on the icon - the parent item is assigned the active class, respectively, the icon with the fas class becomes display: block; and the icon is fal display: none;
I am confused by the double entry in the markup, how can this be beaten more kosherly?

Answer 1

I would change the class fal to fas when changing the class of the parent via toggleClass