React Semantic UI - position icon to the left of text in Menu Item

Question

Using React Semantic UI the default look is this

This is the code (from the website) which produces that component.

import React, { Component } from 'react'
import { Icon, Menu } from 'semantic-ui-react'

export default class MenuExampleCompactVertical extends Component {
  state = {}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      <Menu compact icon='labeled' vertical inverted>
        <Menu.Item name='gamepad' active={activeItem === 'gamepad'} onClick={this.handleItemClick}>
          <Icon name='gamepad' />
          Games
        </Menu.Item>

        <Menu.Item
          name='video camera'
          active={activeItem === 'video camera'}
          onClick={this.handleItemClick}
        >
          <Icon name='video camera' />
          Channels
        </Menu.Item>

        <Menu.Item
          name='video play'
          active={activeItem === 'video play'}
          onClick={this.handleItemClick}
        >
          <Icon name='video play' />
          Videos
        </Menu.Item>
      </Menu>
    )
  }
}

I'd like to position the icons left of the text like this

Any ideas how to do this?

I added the code from the website which produces the default menu. — crinklywrappr, Jun 28 '18 at 21:53

crinklywrappr · Accepted Answer · 2018-06-29T14:33:14.897

6

Looks like I managed to answer my own question. It's not great, but it looks like a little css does the trick.

Just float the icon left

i {
  float: left;
  margin-right: 12px !important;
}

the menu item itself just becomes an a element

a {
  text-align: center;
  line-height: 40px;
}

EDIT:

This is what I actually ended up using, if anyone wants to know. The CSS rules make it a little complicated to get your own rules in based on precedence.

/******     Sidebar     ******/

.ui.icon.menu .item {
    line-height: 40px;
    padding-right: 500px;
    text-align: justify;
    font-weight: 600;
}

.ui.vertical.menu .item::before {
    height: 0px;
}

.ui.labeled.icon.menu .item > .icon:not(.dropdown) {
    float: left;
    margin-right: 12px !important;
}

edited Jun 29 '18 at 14:33

answered Jun 28 '18 at 22:12

crinklywrappr

588
5
18

I don't before but in December 2019, you can give them your own custom class names and put properties that you'd like to override. i.e.: `` and in the css file `.app__menu-item { text-align: left; }` – oyalhi Dec 22 '19 at 16:07
For me, `` with `.app__menu-item { text-align: left; }` will produce styling that is not as high a priority as `.ui.icon.menu .item`. As a result, css tyle has to be for `.ui.icon.menu.item` and you have to use the `!important` override. – NeedsHelpWithPython Jul 14 '20 at 21:44

score 2 · Answer 2 · edited Dec 15 '20 at 18:23

I couldn't get CSS overrides to work, semantic always won that fight!

I did it by putting my Icon component inside an Icon.Group

...
          <Menu.Item name='about'>
            <Icon.Group size='large'>
              <Icon name='question circle' />
            </Icon.Group>
            About
          </Menu.Item>
...

I used this page for inspiration: https://react.semantic-ui.com/elements/icon/#groups-twitter-group

Dan Leonard · Answer 3 · 2021-11-27T02:39:14.143

0

A plain old <span> should do the trick here.

<Menu.Item name='create'>
  <span>
    <Icon name='pen square' />
    Create
  </span>
</Menu.Item>

Another approach that keeps things centered and is a little easier to work with:

<div style={{ display: "inline-flex" }}>
  <Icon size='large' name='pen square' />
  <p style={{ margin: "auto" }}>Create</p>
</div>

edited Nov 27 '21 at 02:39

answered Nov 27 '21 at 02:23

Dan Leonard

99
2
2

score -3 · Answer 4 · answered Jun 28 '18 at 21:53

-3

Just use a list this looks nearly as you like it too

answered Jun 28 '18 at 21:53

Zero Soul Eater

132
1
13

React Semantic UI - position icon to the left of text in Menu Item

4 Answers4