<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">I am added some style to make <code class="notranslate">MenuItem</code> bit smaller, like <code class="notranslate">MenuItem sizes</code> (not find about this property)</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".small-menu-item {
	height: 36px !important;
	min-height: 36px !important;
	line-height: 36px !important;
}"><pre class="notranslate">.<span class="pl-c1">small-menu-item</span> {
	<span class="pl-c1">height</span><span class="pl-kos">:</span> <span class="pl-c1">36<span class="pl-smi">px</span></span> <span class="pl-k">!important</span>;
	<span class="pl-c1">min-height</span><span class="pl-kos">:</span> <span class="pl-c1">36<span class="pl-smi">px</span></span> <span class="pl-k">!important</span>;
	<span class="pl-c1">line-height</span><span class="pl-kos">:</span> <span class="pl-c1">36<span class="pl-smi">px</span></span> <span class="pl-k">!important</span>;
}</pre></div>
<p dir="auto">then used</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const AppBarMenu = (props) =&gt; {
    return (
	  &lt;IconMenu
		{...props}
        iconButtonElement={
          &lt;IconButton&gt;
            &lt;MoreVertIcon/&gt;
          &lt;/IconButton&gt;
        }
        targetOrigin={{ horizontal: &quot;right&quot;, vertical: &quot;top&quot; }}
        anchorOrigin={{ horizontal: &quot;right&quot;, vertical: &quot;top&quot; }}
      &gt;
	    &lt;Subheader&gt;&lt;FontIcon className=&quot;material-icons&quot;&gt;help outline&lt;/FontIcon&gt;Help&lt;/Subheader&gt;
        &lt;MenuItem className='small-menu-item' containerElement={&lt;Link to=&quot;/about&quot; /&gt;} primaryText=&quot;About&quot; /&gt;
        &lt;MenuItem className='small-menu-item' containerElement={&lt;Link to=&quot;/contact&quot; /&gt;}
          primaryText=&quot;Contact&quot;
        /&gt;
      &lt;/IconMenu&gt;
    );
  }
AppBarMenu.muiName = 'IconMenu'
// other codes"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">AppBarMenu</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
	  <span class="pl-c1">&lt;</span><span class="pl-ent">IconMenu</span>
		<span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span>
        <span class="pl-c1">iconButtonElement</span><span class="pl-c1">=</span><span class="pl-kos">{</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">IconButton</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">MoreVertIcon</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">IconButton</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">}</span>
        <span class="pl-c1">targetOrigin</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">horizontal</span>: <span class="pl-s">"right"</span><span class="pl-kos">,</span> <span class="pl-c1">vertical</span>: <span class="pl-s">"top"</span> <span class="pl-kos">}</span><span class="pl-kos">}</span>
        <span class="pl-c1">anchorOrigin</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">horizontal</span>: <span class="pl-s">"right"</span><span class="pl-kos">,</span> <span class="pl-c1">vertical</span>: <span class="pl-s">"top"</span> <span class="pl-kos">}</span><span class="pl-kos">}</span>
      <span class="pl-c1">&gt;</span>
	    <span class="pl-c1">&lt;</span><span class="pl-ent">Subheader</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">FontIcon</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"material-icons"</span><span class="pl-c1">&gt;</span>help outline<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">FontIcon</span><span class="pl-c1">&gt;</span>Help<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Subheader</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">MenuItem</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">'small-menu-item'</span> <span class="pl-c1">containerElement</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">to</span><span class="pl-c1">=</span><span class="pl-s">"/about"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span> <span class="pl-c1">primaryText</span><span class="pl-c1">=</span><span class="pl-s">"About"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">MenuItem</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">'small-menu-item'</span> <span class="pl-c1">containerElement</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">to</span><span class="pl-c1">=</span><span class="pl-s">"/contact"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span>
          <span class="pl-c1">primaryText</span><span class="pl-c1">=</span><span class="pl-s">"Contact"</span>
        <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">IconMenu</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-v">AppBarMenu</span><span class="pl-kos">.</span><span class="pl-c1">muiName</span> <span class="pl-c1">=</span> <span class="pl-s">'IconMenu'</span>
<span class="pl-c">// other codes</span></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3511344/34639445-555d73a0-f302-11e7-9efa-25b2928a30f4.PNG"><img src="https://user-images.githubusercontent.com/3511344/34639445-555d73a0-f302-11e7-9efa-25b2928a30f4.PNG" alt="11" style="max-width: 100%;"></a><br>
but,</p>
<ul dir="auto">
<li>The centerY of icon is close to top of text, but should be close to <code class="notranslate">centerY</code> of text</li>
<li><code class="notranslate">width</code> of <code class="notranslate">IconMenu</code> automatically becomes much longer</li>
</ul>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Fix the width, should not change the width of <code class="notranslate">IconMenu</code></li>
<li>Fix layout</li>
</ol>
<h2 dir="auto">Context</h2>

<p dir="auto">I am tried to make option (click to button, then show menu items) with some icon (looks much beatiful)</p>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">Node.js 9.x<br>
Parcel bundler 1.4.1</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>0.20</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 62</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<h1 dir="auto">my note</h1>
<p dir="auto">It's my first application i'm trying to build the with <code class="notranslate">Material UI</code> and your design implementation the best one, i'm very love, especially <code class="notranslate">Ripple effect</code></p>
<h3 dir="auto">Problem description</h3>
<p dir="auto">Can't get event.target.id on chrome when clicking on the text part of a button, but works when clicking  on the edge, it doesn't work at all in earlier releases,<br>
could you fix this (in both versions )? I'm sure it's not something that huge, it works perfectly on firefox, but we need all recent browsers working</p>