how to change submenu arrow icon according to the menu display

this is the my menu

<ul>
  <li class="nav-item">
                <a class="nav-link sub-parent">
                    <i class="nav-icon fas fa-tachometer-alt"></i>
                    <p>
                        Dashboard
                        <i class="right fas fa-angle-left"></i>
                    </p>
                </a>
                <ul class="nav sub-menu">
                    <li class="nav-item">
                        <a href="../../index.html" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>Dashboard v1</p>
                        </a>
                    </li>
                </ul>
            </li>
</ul>

this is the jquery function that i use for sub menu

    $(document).ready(function(){
    $('.sub-parent').click(function(e){
      e.preventDefault();
      $(this).next('.sub-menu').slideToggle();
    });
  });

css class

 .sub-menu{display: none;}

Currently left arrow icon display in the menu. I used this for it

when sub menu open, i need to change this icon. How i do it.?