Eu sou novo no Angular 2 Material e estou tentando personalizar o estilo do 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>

As configurações de estilo predefinidas funcionam bem (por exemplo, definindo o menu como sem sobreposição), mas eu gostaria de definir o menu md como 100% de largura e ter um pouco de espaço entre o botão md-icon, que expande o menu, que eu não pode fazer com odiretivas predefinidas do Material Angular 2.

Até agora, encontrei uma solução com o comando / deep / css, mas li que o comando não é mais suportado pelos principais navegadores.

Qual é uma boa maneira de personalizar um componente de material Angular 2? Como eu poderia estilizar meu menu md, para que ele tivesse 100% de largura e algum espaço entre o botão de expansão?

Para ilustrar do que estou falando:Rascunho do menu