title: React Semantic UI - position icon to the left of text in Menu Item
body: <p>Using React Semantic UI the default look is this</p>
  
  <p><a href="https://i.stack.imgur.com/Q01yx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Q01yx.png" alt="React Semantic UI default look for Menu-items with an icon"></a></p>
  
  <p>This is the code (from the website) which produces that component.</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Icon, Menu } from 'semantic-ui-react'
  
  export default class MenuExampleCompactVertical extends Component {
    state = {}
  
    handleItemClick = (e, { name }) =&gt; this.setState({ activeItem: name })
  
    render() {
      const { activeItem } = this.state
  
      return (
        &lt;Menu compact icon='labeled' vertical inverted&gt;
          &lt;Menu.Item name='gamepad' active={activeItem === 'gamepad'} onClick={this.handleItemClick}&gt;
            &lt;Icon name='gamepad' /&gt;
            Games
          &lt;/Menu.Item&gt;
  
          &lt;Menu.Item
            name='video camera'
            active={activeItem === 'video camera'}
            onClick={this.handleItemClick}
          &gt;
            &lt;Icon name='video camera' /&gt;
            Channels
          &lt;/Menu.Item&gt;
  
          &lt;Menu.Item
            name='video play'
            active={activeItem === 'video play'}
            onClick={this.handleItemClick}
          &gt;
            &lt;Icon name='video play' /&gt;
            Videos
          &lt;/Menu.Item&gt;
        &lt;/Menu&gt;
      )
    }
  }
  </code></pre>
  
  <p>I'd like to position the icons left of the text like this</p>
  
  <p><a href="https://i.stack.imgur.com/7iS5b.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7iS5b.png" alt="Icons positioned left of text"></a></p>
  
  <p>Any ideas how to do this?</p>