¿Cómo reemplazar el ícono "fa-angle-left" con "fa-angle-down" cuando haces clic en él?
<li class="has-sub"> <a class="js-arrow" href="#"><i class="fas fa-user"></i>Users<i class="pull-right fas fa-angle-left"></i></a> <ul class="list-unstyled navbar__sub-list js-sub-list"> <li><a href="<?=ADMIN;?>/user">User List</a></li> <li><a href="<?=ADMIN;?>/role">Roles</a></li> </ul> </li>Puede verificar una clase usando classList.contains y reemplazarla usando classList.replace según el resultado de check .
( classList devuelve DOMTokenList )
let pr = document.querySelector(".pull-right"); pr.addEventListener("click", () => { if (pr.classList.contains("fa-angle-left")) { pr.classList.replace("fa-angle-left", "fa-angle-right"); } }); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <ul> <li class="has-sub"> <a class="js-arrow" href="#"><i class="fas fa-user"></i>Users<i class="pull-right fas fa-angle-left"></i></a> <ul class="list-unstyled navbar__sub-list js-sub-list"> <li><a href="<?=ADMIN;?>/user">User List</a></li> <li><a href="<?=ADMIN;?>/role">Roles</a></li> </ul> </li> </ul>Si desea alternar entre el ícono izquierdo y derecho, debe agregar la parte else a la condición if.
let pr = document.querySelector(".pull-right"); pr.addEventListener("click", () => { if (pr.classList.contains("fa-angle-left")) { pr.classList.replace("fa-angle-left", "fa-angle-right"); } else { pr.classList.replace("fa-angle-right", "fa-angle-left"); } }); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <ul> <li class="has-sub"> <a class="js-arrow" href="#"><i class="fas fa-user"></i>Users<i class="pull-right fas fa-angle-left"></i></a> <ul class="list-unstyled navbar__sub-list js-sub-list"> <li><a href="<?=ADMIN;?>/user">User List</a></li> <li><a href="<?=ADMIN;?>/role">Roles</a></li> </ul> </li> </ul>