How to change mobile menu icon on expand?

Question

css

There is a menu on Bootstrap.

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <i class="fa fa-bars" aria-haspopup="true"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <p class="menu-site-logo"><?php the_custom_logo(); ?></p>
  <?php echo $site_menu; ?>
</div>

how to change the icon of the opened menu to ?
<i class="fa fa-bars"></i>
<i class="fa fa-times"></i>

Answer 1

As an option, put 2 icons initially, hide the mob, and open the mob on the adaptive and hide the PC icon (through the parent).
Still of course JS with substitution.