Bootstrap 4 Collapse show state with Font Awesome icon

Question

I have a single Bootstrap 4 collapse as follows...

Answer 1

Solution with no FontAwesome unicode and no JavaScript:

1. Include both icons where you currently have one icon
2. Use CSS to hide the up-arrow element while the content is expanded, and hide the down-arrow while the content is collapsed

Example:

HTML:

CSS:

[aria-expanded="true"] .fa-chevron-circle-up, 
[aria-expanded="false"] .fa-chevron-circle-down {
    display:none;
}