title: Semantic UI Vertical Align Icon and Menu
body: <p>I am currently trying to align a Icon and a text in a Menu.Item with Semantic UI React V.0.68.2.</p>
  
  <p>Currently my HTML output looks like this:</p>
  
  <pre><code>&lt;a class="active item pointer"&gt;
      &lt;i aria-hidden="true" class="icon ti-icon ti-home large"&gt;&lt;/i&gt;
      Dashboard
  &lt;/a&gt;
  </code></pre>
  
  <p>And my JSX like this:</p>
  
  <pre><code>&lt;Menu vertical className="some classes" icon=''&gt;
      &lt;Menu.Item
      active={active}
      onClick={onClick}
      className="some class"
      &gt;
          &lt;Icon name="home" large /&gt; Dashboard
     &lt;/Menu.Item&gt;
  &lt;/Menu&gt;
  </code></pre>
  
  <p>I wrote a new Icon component to use my own Icon Font which looks like this. I tried to stay as close to the original Icon class from the React Implementation of Semantic UI.</p>
  
  <pre><code>import React, { Component } from "react";
  import classnames from "classnames";
  
  /**
   * @class Icon
   * @extends {Component}
   * @description Icon class for themify icons. Replacement for semantic ui Icon class
   */
  class Icon extends Component {
      render() {
          var iconClass = classnames("icon ti-icon ti-" + this.props.name, {
              big: this.props.big,
              large: this.props.large,
              close: this.props.close
          });
  
          return (
              &lt;i
                  aria-hidden={true}
                  className={this.props.close ? iconClass.replace("icon", "") : iconClass}
                  onClick={this.props.onClick}
              /&gt;
          );
      }
  }
  
  export default Icon;
  </code></pre>
  
  <p>Now I want the Text and the Icon to be vertically centered but I can't get it to work, they text always seems to be at the top of its parent node. But actually I want it to appear vertically centered in the Menu.Item. with any size of the Icon. So when I change the size of the Icon to large the text should always be centered vertically. The size classes are the same as in Semantic UI.</p>
  
  <p><a href="https://i.stack.imgur.com/Kd9et.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Kd9et.png" alt="Dashboard misaligned"></a></p>
  
  <p>Does anyone have an idea how to achieve this ? Thanks in advance :)</p>