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?

Stephaniastephanie

I added the code from the website which produces the default menu. – Stephaniastephanie

Answer 1

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;
}

Stephaniastephanie

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.: <Menu.Item className="app__menu-item" name="spam" ... </Menu.Item> and in the css file .app__menu-item { text-align: left; } – Unhappy

For me, <Menu.Item className="app__menu-item" name="spam" ... </Menu.Item> 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. – Bobwhite

Answer 2

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

Rillis

Answer 3

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>

Warrior

Answer 4

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

Cram