CODEWITHSUNDEEP
reactjssemantic-uisemantic-ui-reactsemantic-ui-css
As3Script
As3Script

Reputation: 147

How to change Title icon in semantic UI React Accordion

https://react.semantic-ui.com/modules/accordion

on their first example, I have a requirement where I need another icon instead of dropdown.

I need to replace it with "angle right, angle down".

<Accordion.Title active={activeIndex === 2} index={2} 
onClick={this.handleClick}>

  <Icon name='dropdown' />/* dropdown to angle right or down*/

  How do you acquire a dog?

</Accordion.Title>

Is anyone has experience with this? how to change title icon on react-semantic-Accordion

Upvotes: 2

Views: 3640

Answers (2)

bitwalker
bitwalker

Reputation: 89

I just faced this issue myself and since OP didn't post his solution, the following might help others.

The same logic used to determine if the accordion is active can be used to set the title. Simply use a const for the icon name like 

const iconName = activeIndex === 2 ? 'chevron down' : 'chevron right';
<Accordion.Title active={activeIndex === 2} index={2} this.handleClick}>

  <Icon name={iconName} />/* dropdown to angle right or down*/

  How do you acquire a dog?

</Accordion.Title>

Upvotes: 3

Fawaz
Fawaz

Reputation: 3560

Change the name of the icon :

<Icon name='chevron right' />

ref : React semantic icon set

Upvotes: 2

Related Questions