Creé un acordeón Bootstrap 5 como aquí https://getbootstrap.com/docs/5.0/components/accordion/ . De forma predeterminada, las flechas giran 180 grados cuando el elemento está abierto (de 'v' a '^'). Pero quiero que la flecha gire solo 90 grados (desde ' > ' hasta ' v ').

Traté de manipularlo intercambiando valores de variables:

En _variables.scss configuro $accordion-icon-transform: rotate(90deg); (en lugar de bootstrap 5 por defecto $accordion-icon-transform: rotate(-180deg) !default; ) y cambié la flecha svg de una 'v' (bootstrap 5 por defecto) a un '>'

El resultado es que en la carga de la primera página, las flechas se ven como 'v' (quiero un '>'). Cuando abro el elemento de acordeón, muestra una 'v' (correcto). Luego lo cierro y la flecha parece deseada '>'. Pero quiero que la flecha muestre '>' con la carga de la primera página .

¿Hay alguna manera de lograr esto, solo manipulando las variables de arranque? ¿O tengo que escribir JS adicional encima de colapso.js?