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?

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

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