Adding a Custom Icon to FAQ Accordion Cards

Micaela_Luders · December 14, 2020, 11:08pm

You can change the toggle icon on the FAQ Accordion card from the default chevron to a custom icon using the following:

Fork the faq-accordion card and modify the template.hbs file to include “iconUrl” rather than “iconName”. It should look like this:


 <div class="HitchhikerFaqAccordion-icon js-HitchhikerFaqAccordion-icon{{#if card.isExpanded}} HitchhikerFaqAccordion-icon--expanded{{/if}}"
      data-component="IconComponent"
      data-opts='{"iconUrl": "https://www.brandname.com/themes/simple/images/arrow-down.svg"}'
      data-prop="icon">
    </div>

To make the icon rotate like the default chevron does, you will need to add this code to the answers.scss file:

.HitchhikerFaqAccordion-icon {
    transition: all 400ms ease-in-out;
}    

.HitchhikerFaqAccordion--expanded .HitchhikerFaqAccordion-icon {
    transform: rotate(-180deg);
}

*Based on the URL you’re including, you may also need to adjust the icons sizing

Here is what the end result will look like:

faq-icon