Problema na alteração de classes do jquery

estou desenvolvendo um layout simples com html, css e jquery. O meu problema é que o icone da esquerda está sendo trocado pelas setas da direia quando eu seleciono um accordion.

Problema informado

HTML

<ul class="menu">             <li><a href="#"><i class="icone icone-menu fas fa-home"></i>Inicio</a></li>             <li><a href="#"><i class="icone icone-menu fas fa-address-book"></i>Clientes</a></li>             <li><a href="#">Fornecedores</a></li>             <li><a href="#">Orçamentos</a></li>             <li><a href="#">Pedidos</a></li>             <li><a href="#">Produtos<i class="icone fechado fas fa-chevron-right"></i></a>                 <ul>                     <li><a href="#">Categoria</a></li>                     <li><a href="#">Subcategoria</a></li>                     <li><a href="#">Produtos</a></li>                 </ul>             </li>             <li><a href="#">Relatórios<i class="icone fechado fas fa-chevron-right"></i></a>                 <ul>                     <li><a href="#">Pedidos</a></li>                     <li><a href="#">Produtos</a></li>                 </ul>             </li>         </ul>  

CSS

.sidebar ul {   list-style: none; }  .sidebar .menu li a {   text-decoration: none;   display: block;   padding: 15px 20px; }  .sidebar .menu li a:hover {   color: #485053;   background: #e2e2e2; }  .sidebar .menu .icone {   font-size: 18px; }  .sidebar .menu .icone {   font-size: 12px; }  .sidebar .menu .icone.fechado{   margin-left: 10px;   float: right; }  .sidebar .menu .icone.icone-menu {   margin-right: 10px; }  .sidebar .menu ul {   display: none; }  .sidebar .menu ul li a {   background: #343a40; }  .sidebar .menu .ativado > a {   color: #485053;   background: #e2e2e2; } 

Jquery

$  (document).ready(function () {      $  ('.menu li:has(ul)').click(function(e){         e.preventDefault();          if($  (this).hasClass('ativado')) {             $  (this).removeClass('ativado');             $  ('.menu li i').removeClass('fas fa-chevron-down');             $  ('.menu li i').addClass('fas fa-chevron-right');             $  (this).children('ul').slideUp();         } else {             $  ('.menu li ul').slideUp();             $  ('.menu li').removeClass('ativado');             $  (this).addClass('ativado');             $  ('.menu li i').removeClass('fas fa-chevron-right');             $  ('.menu li i').addClass('fas fa-chevron-down');             $  (this).children('ul').slideDown();         }     });  });