The Essential Guide to Bootstrap Accordion Icons

Icons are an essential part of Bootstrap Accordions. They give quick visual indication about the expanded or closed state of the accordion. Because of this, it is important to be able to customize icons according to your project’s style system. In this demo I will show how to control the icon color and customize the type of icon rendered in the accordion.

The particular approach I will take is a CSS-based approach to customizing icon type and color. My live demo uses this method. Another approach would be to maintain open/closed state in state value, and then swap icons and CSS classes based on state. I will give code snippets for this method as well.

Here is the Accordion we will create. It is based on this starter code from the Bootstrap docs.

There is a Code Sandbox link with a live Bootstrap Accordion demo in the Resources section.

Bootstrap Accordion with Custom Plus and Minus Icons

Setting custom icons on the Accordion is a common requirement, especially a plus and minus icon. However, to do that we first need to understand how Bootstrap is using CSS to apply the default up and down arrows.

In the screenshot below, I have captured the DOM and styling for the default expanded icon. Bootstrap uses the .accordion-button class, the :not pseudo-selector, and the ::after pseudo-element to apply a background image and a transformation. Behind the scenes, this is managed by the Bootstrap collapse JS plugin.

(As a side note, I had to add import transitions from "bootstrap"; to my code to get the animation working.)

In order to set a custom icon, we need to target the same class and pseudos and remove the background image. Then we can use background image or the content property to add our own icon. For my example I wanted to use Font Awesome, so I used the content property. See my code below:

@import url("https://use.fontawesome.com/releases/v5.15.0/css/all.css");
.accordion-button:not(.collapsed)::after {
  content: "\f057";
  font-family: "Font Awesome 5 Free";
  color: red;
  background-image: none;
}

.accordion-button.collapsed::after {
  /* content: "\f057";  x*/
  /* content: "\f058";  check*/
  /* "\f067"  plus*/
  /* "\f068"  minus*/
  content: "\f058";
  color: green;
  font-weight: 400;
  font-family: "Font Awesome 5 Free";
  background-image: none;
}

This uses CSS to handle the icon change on collapse and expand. This creates an icon toggle with very little code and is an excellent approach. Notice that I had to target .accordion-button:not(.collapsed)::after, instead of simply targeting .accordion-button::after. I did this because Bootstrap did it, and to override their styling I had to use at least as specific of a selector as the Bootstrap library did.

I included the content value for “plus” and “minus”, as well as the “check” and “x” like I used in my example. I had trouble getting “plus” and “minus” to work with Font Awesome 5 Free.

You can add background color to the accordion-button using Bootstrap tags and variables. You can also add hover effects to the accordion icon.

Toggling Icons on Bootstrap Accordion with a State Value

If you do not want to use the CSS approach, you can use a state management approach. React makes this easy because you can use useState and onClick.

First, strip the default background image using background-image: none on the accordion-button class like above. Then, you want a button like the below (this is just pseudo-code, so use with caution):

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const [expanded, setExpanded] = useState(true);

//in the return
<button class="accordion-button" type="button" onClick={()=>setExpanded(!expanded)}>
  <p>Accordion Item #1</p><FontAwesomeIcon icon={faHome} />
</button>

Remove the default padding on the <p> element and set the button to flex with justify-content: space-between; to get proper spacing.

Positioning Bootstrap Accordion Icon Left and Right

By default the Accordion icon is right aligned. We can easily set that to left aligned by using the ::before pseudo-element.

The bigger problem is that we need to right-align the button element text. I expected I could easily set text-align: right; and solve this…but it didn’t work. Instead, I had to wrap the “Accordion #1” text in a <p> tag and then add text-align: right;. I also had to remove some default margin from the <p> tag.

//CSS
.accordion-button.collapsed::before {
  content: "\f058";
  color: green;
  font-weight: 400;
  font-family: "Font Awesome 5 Free";
  padding-right: 12px;
}

.right-align {
  width: 100%;
  margin: 0px;
  text-align: right;
}

//JS
<p className="right-align">Accordion #1</p>

Bootstrap Accordion Icon Color

Adding icon color can be done by targeting .accordion-button.collapsed::after and .accordion-button:not(.collapsed)::after. You’ve probably noticed that I’ve already added a custom color to the icons in the previous example code.

Icon color, font weight, font family, and other stylings can be quickly added here and will override the Bootstrap defaults. Here’s another example of the CSS below:

.accordion-button:not(.collapsed)::after {
  color: yellow;

  font-weight: bold;
  font-size: 18px;
}

Resources

Here are four examples of Bootstrap button hover styling.

Here is a fantastic guide to aligning buttons in Bootstrap.

Here is a fantastic guide to Bootstrap Padding.

Here’s how to add a clear button (or icon) to a Bootstrap FormControl component.

Bootstrap Accordion Docs

Code Sandbox Demo