Unexpected behavior using Angular Material

I'm making an application using Angular 2.

I have followed the steps described in the official documentation to use Angular Material in my application. (Except the SystemJS mappings which I am not using)

Everything seems to work correctly, that is, there are no errors in the console, except that the components do not work quite well, as if the styles were not loaded correctly or something was missing.

In my app.component.scss I have the following (I add a topic of Angular Material)

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.scss';

.spacer {
  // This fills the remaining space, by using flexbox. 
  // Every toolbar row uses a flexbox row layout.
  -webkit-box-flex : 1;
  -ms-flex : 1 1 auto;
  flex : 1 1 auto;
}

And the content of the html of the main component app.component.html :

<md-toolbar color="primary">
  <span>Título</span>
  <span class="spacer"></span>
  <button md-icon-button [mdMenuTriggerFor]="menu">
    <md-icon>more_vert</md-icon>
  </button>
  <md-menu #menu="mdMenu">
    <button md-menu-item>
      <md-icon>fingerprint</md-icon>
      <span>Login</span>
    </button>
    <button md-menu-item>
      <md-icon>fingerprint</md-icon>
      <span>Registrarse</span>
    </button>
    <button md-menu-item>
      <md-icon>fingerprint</md-icon>
      <span>Acerca de</span>
    </button>
  </md-menu>
</md-toolbar>

<md-tab-group>
  <md-tab label="Mapa">Mapa</md-tab>
  <md-tab label="Configuración">Config</md-tab>
</md-tab-group>

As I say the behavior of the components does not seem to work quite well and in the following image you can see clearly what I mean:

As you can see, the menu does not appear below the button that executes the action to open the menu. The tabs have no style, the ripple effect of the buttons does not work etc.

What can be happening or what can I miss?