Angular 2 Material Personalizar md-menu

Soy nuevo en Angular 2 Material y estoy tratando de personalizar el estilo del componente md-menu.

<md-icon class="material-icons" [mdMenuTriggerFor]="menu">dehaze</md-icon>
<md-menu #menu="mdMenu" [overlapTrigger]="false">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

La configuración de estilo predefinida funciona bien (p. Ej., Configurar el menú para que no se superponga), pero me gustaría establecer el menú md al 100% de ancho y tener un pequeño espacio entre el botón del icono md, que expande el menú, que yo no puede hacer con eldirectivas predefinidas de Angular 2 Material.

Hasta ahora encontré una solución con el comando / deep / css, pero leí que el comando ya no es compatible con los principales navegadores.

¿Cuál es una buena manera de personalizar un componente de material angular 2? ¿Cómo podría diseñar mi menú md, de modo que tenga un ancho del 100% y algo de espacio entre su botón desplegable?

Para ilustrar de lo que estoy hablando:Borrador del menú.