Using React Semantic UI the default look is this

[![React Semantic UI default look for Menu-items with an icon](https://i.stack.imgur.com/Q01yx.png)](https://i.stack.imgur.com/Q01yx.png)

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

[![Icons positioned left of text](https://i.stack.imgur.com/7iS5b.png)](https://i.stack.imgur.com/7iS5b.png)

Any ideas how to do this?