How To Style Arrow Of HTML Accordion

To change the arrow of an HTML accordion, we need to use the pseudo-element ::marker on the summary tag.

summary::marker {
  content: '\f138' ' ';
  /* Required for FA icons */
  font-family: 'Font Awesome 5 Free';
  font-weight: 700;
}

To change the default, all you need to do is add a content property and an appropriate value. In this example, I'm using Font Awesome to get a Chevron icon. Notice how I've added a 2^nd empty string to create some right-hand spacing.

Opened accordion

To change the icon of an opened accordion, we must take advantage of the dynamically generated open attribute on the details tag.

details[open] summary::marker {
  content: '\f13a' ' ';
}