title: Material-UI/React: How to correctly add notification button with Badge to AppBar?
body: <p>Using material-ui and react/jsx, I have an AppBar. I wanted to add a notifications menu icon with badge (number) on it, that is, to show the number of new notifications.</p>
  
  <p>The problem is that the badge will be displayed incorrectly. That is, with weird styles and look.</p>
  
  <p>Here is what I have already tried</p>
  
  <pre><code>&lt;AppBar&gt;
      &lt;IconMenu anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
                targetOrigin={{ horizontal: 'right', vertical: 'bottom' }}
                iconButtonElement={
                    &lt;FlatButton label={&lt;Badge badgeContent={5} /&gt;} icon={&lt;NotificationsIcon /&gt;} /&gt;
                }
      /&gt;
  &lt;/AppBar&gt;
  </code></pre>
  
  <p>That way, the badge will not be aligned correctly with the bell (notifications) icon.</p>
  
  <p>I have also tried making the <code>IconMenu</code> part of the <code>AppBar's</code> iconElementRight property to no avail.</p>
  
  <p>Any help?</p>