How to move SemanticUIReact Icon left of text element in sub-menu?

Question

The image below demonstrates the current GUI, i simply wish to place the icon to the left of the 'Language' menu instead of the current position (right)

Current Code

  </Dropdown.Item>
                <Dropdown text="Language" icon="angle down" pointing="right"
                        options={[
                          { text: 'English', value: 'en', flag: 'gb'},
                          { text: 'Svenska', value: 'se', flag: 'se' },
                          { text: 'Dansk', value: 'de', flag: 'de' },
                          { text: 'Norsk', value: 'no', flag: 'no' },
                        ]}
                    />

Any suggestions on how i could locate the "angle down" icon to the left of the "language" text would be much appreciated.

Answer 1

You could use the trigger prop in stead of text as per the docs and remove the default icon.

const trigger = (
  <span>
    <Icon name="angle down" /> Language
  </span>
);

const options = [
  { text: "English", value: "en", flag: "gb" },
  { text: "Svenska", value: "se", flag: "se" },
  { text: "Dansk", value: "de", flag: "de" },
  { text: "Norsk", value: "no", flag: "no" }
];

const DropdownTriggerExample = () => (
  <Dropdown pointing="right" trigger={trigger} options={options} icon={null} />
);

Also note that you have a typo for the Danish element ("de" where it should be "dk").