Unexpected behavior using Angular Material

I am making an application using Angular 2.

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

Everything seems to be working fine, ie there are no errors in the console, except that the components are not working quite right, like the styles are not loading correctly or something is missing.

In my app.component.scssI have the following (I add an Angular Material theme)

@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 html content 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 clearly see 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 are not styled, the ripple effect of the buttons does not work etc.

What could be happening or what could I be missing?