Semantic-ui-react: Menu dropdown icon position/two icons

[farebord]

<Dropdown className="icon" item icon='caret down' text='Account'>
    <Dropdown.Menu>
        <Dropdown.Item></Dropdown.Item>
    </Dropdown.Menu>
</Dropdown>

With above code you cant set up a Dropdown, but you can't align icon left nor you can't have two icons like this:

Why? I'm using React, do I have to use Semantic UI (not react one) to achieve that?

[layershifter]

Duplicate, see #1147 for workaround.

[farebord]

Thats not what I asked. I mean two icons on Dropdown text, not options. :/

[layershifter]

<Dropdown trigger={<span><Icon name='user'/>File</span>} />

[levithomason]

do I have to use Semantic UI (not react one) to achieve that?

Note, you'll run into lots of issues trying to run SUI's jQuery plugins on top of React's virtual DOM. They both will be making changes to the DOM and will get out of sync. You should use one or the other.

[mchurichi]

is there any option other than using the text prop? that one is supposed to be a string, and using @layershifter's solution it works, but triggers a PropTypes validation warning.

/** The text displayed in the dropdown, usually for the active item. */
text: PropTypes.string,

[layershifter]

It was wrong advice, use the trigger prop:

<Dropdown trigger={<span><Icon name='user'/>File</span>} />

The result will be same.

[mchurichi]

Thanks! it works like a charm