2

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

As3Script
  • 137
  • 4
  • 16

2 Answers2

3

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>
bitwalker
  • 67
  • 8
2

Change the name of the icon :

<Icon name='chevron right' />

ref : React semantic icon set

Fawaz
  • 3,404
  • 3
  • 17
  • 22
  • Thanks for your answer, it changes the icon but not behaving the way it should. Now I am hiding the icon and adding my own icon and logic. – As3Script Mar 16 '18 at 05:38
  • 2
    I was wondering how to do this in shorthand accordion. More specifically, is removing the icon possible? Thanks – niCad Dec 10 '18 at 09:02