CODEWITHSUNDEEP
javascriptreactjssemantic-uisemantic-ui-react
Arasto
Arasto

Reputation: 491

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

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)

Issue

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.

Upvotes: 0

Views: 54

Answers (1)

Morsby
Morsby

Reputation: 56

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").

Upvotes: 1

Related Questions