All `.icon` in `accordion-header` are rotated when accordion is open

[codebling]

An accordion with an icon in the title looks ok when collapsed.

When it's open, the icons in the title are rotated.

Is there a way around this?

The following code sample should produce the example above.

<div class="accordion">
  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden />
  <label class="accordion-header" for="accordion-1">
    <i class="icon icon-arrow-right mr-1"></i>
    This is an accordion. 
    <i class="icon icon-emoji"></i>
  </label>
  <div class="accordion-body">
    <ul class="menu menu-nav">
      <li class="menu-item">hello</li>
    </ul>
  </div>
</div>

[Ari]

I used the following code.

.accordion input:checked~.accordion-header .icon+.icon, .accordion[open] .accordion-header .icon+.icon { transform: rotate(0); }

[Ari]

I believe that in the future, something like this should be used instead.

.accordion input:checked~.accordion-header .icon:first-child, .accordion[open] .accordion-header .icon:first-child { transform: rotate(90deg); }

[codebling]

Thanks for looking. Looks very similar to what I did in the PR, although it seems like there are some spaces in there that shouldn't be

[Yan Zhu]

Fix merged in v0.5.9. Thank you.