Changing the icon when clicking on the accordion, how to do?

Question

css

There is a standard bootstrap accordion. In the button of which there is an icon in the form of an arrow.
We press the button, the arrow looks no longer down but up.
How to implement this moment?
I can change the style through focus, but the arrow itself. hmmm .... or it should not be written in hmtl, but as a class, written in styles, and then in principle it will be what you need, I suppose, but first I would like to know if it is possible to do something differently?

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    стрелка вниз, при открытии стрелка должна будет уже смотреть вверх.
  </button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Answer 1

Rotate via CSS class based on state.

.element {
  transform: rotate(90deg);
}