After finding a helpful answer on Stack Overflow, I successfully changed the fill color of Bootstrap 5's down-chevron svg using CSS. Now, I am attempting to locate the URL for the up-chevron (open icon) so I can modify its fill color as well, but it is proving difficult to find.
Upon inspecting the HTML for both the official Bootstrap example and my own code, I only see the "down" collapsed background image and a grayed-out square next to it where the substituted "up" image should be. Unfortunately, my CSS attempts to target that up-icon have been unsuccessful.
Below is the CSS code that works for the down-icon, along with my failed efforts to target the up-icon. I have used background-color:yellow to test if the selector is working properly.
.accordion-button.collapsed::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button.collapse a:link.active,
.accordion-button-active-collapse ::after,
button.accordion-button-active::after.active {
background-color: yellow;
}