title: Angular 2 Material Customize md-menu
body: <p>I am new to Angular 2 Material and I am trying to customize the style of the md-menu component.</p>
  
  <pre><code>&lt;md-icon class="material-icons" [mdMenuTriggerFor]="menu"&gt;dehaze&lt;/md-icon&gt;
  &lt;md-menu #menu="mdMenu" [overlapTrigger]="false"&gt;
    &lt;button md-menu-item&gt;Item 1&lt;/button&gt;
    &lt;button md-menu-item&gt;Item 2&lt;/button&gt;
  &lt;/md-menu&gt;
  </code></pre>
  
  <p>The predefined style settings work fine (e.g. setting the Menu to non-overlapping), but I would like to set the md-menu to 100% width and have a little space between the md-icon button, that expands the menu, which I can not do with the <a href="https://material.angular.io/components/menu/api" rel="noreferrer">predefined directives from Angular 2 Material</a>.</p>
  
  <p>So far I found a solution with the /deep/ css command, but I read that the command is not supported by the major browsers any more.</p>
  
  <p>What is a good way to customize a Angular 2 Material component? How could I style my md-menu, so that it has 100% width and some space between it´s expanding button?</p>
  
  <p>To illustrate what I am talking about:
  <a href="https://i.stack.imgur.com/zldUS.png" rel="noreferrer">Draft of the menu</a></p>