How to change icon when collapse/expand a div?

I have the following in a razor component:

@{    var id = $"collapseNotes{itemId}";    var href = $"#{id}";<div><i class="fas fa-angle-right"></i><a data-toggle="collapse" href="@(href)" role="link" aria-expanded="false" aria-controls="@(id)">            More info</a><div class="collapse pl-3 pr-3" id="@(id)"><p>long text...</p></div>       </div>}

Collapsing and expanding is working fine.

However, I would like to change the icon on expanding and then back to the original state when collapsed.

Is it easily achievable just by using css or is js necessary? Either way, what is the best practice implementation?