How to change the default chevron icon in Accordion to +/- ?

[sivaranjansahu]

I am trying to figure out how to change the chevron icon in the Accordion items to something else. I think I need to do that in the theme, but not sure how to do. Can anyone help , please ? thanks

[payapula]

Hi @sivaranjansahu

They have an example for this exact use case in the docs: Accessing the internal state - Accordion | Chakra Docs

And here is the live example of how to achieve what you are looking for - https://codesandbox.io/s/thirsty-cartwright-v6mqo?file=/src/index.js

let me know if this helps. :)

[sivaranjansahu]

Thank you so much!!

[FredPerr]

The problem seems to be deeper than that because the animation is no longer usable. The AccordionIcon should extend the as property correctly in TypeScript. It works fine if ignoring type error while doing the following:
<AccordionIcon as={HiChevronDown}/>

HiChevronDown is just an icon from react-icons.

[ahmedshantodev]

@FredPerr thanks 🖤