title: Duplicated styles on head and a lot of <style> elements
body: <p>I'm quite happy with angular-material2 components but there are some weird behaviors that I don't understand and they don't have a proper documentation especially for teeming and customizing their components.</p>
  
  <p>My project looks like:</p>
  
  <pre><code>.src
    --app
      --components
        --login-component
             login-component.html
             login-component.scss
             login-component.js
        --login-component
              home-component.html
              home-component.scss
              home-component.js
         --and so on ...
      app.component.html
      app.component.scss
      app.component.ts
      app.module.ts
      app.routing.ts
      --assets
      --environments
      --scss
        styles.scss
        _material2-theme.scss
        _variables-scss
        _utilities.scss
        _reset.scss
     favicon
     index.html
     and so on ....
  </code></pre>
  
  <p>In angular-cli.json I have modified the styles to look at scss/style.scss</p>
  
  <pre><code>...
  "styles": [
          "scss/styles.scss"
        ]
  ...
  </code></pre>
  
  <p>the _material2-theme.scss looks like:</p>
  
  <pre><code>//////////////////////* THEMES */ Custom Blue Theme*/
  @import '~@angular/material/theming';
  @include mat-core();
  $app-primary: mat-palette($mat-light-blue);
  $app-accent:  mat-palette($mat-light-blue, A200, A100, A400);
  $app-theme:   mat-light-theme($app-primary, $app-accent);
  @include angular-material-theme($app-theme);
  
  /*default palette forground/background*/
  $light-foreground-palette: map-get($app-theme, foreground);
  $light-background-palette: map-get($app-theme, background);
  
  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);
  </code></pre>
  
  <p>and inside of style.scss I am importing everything to be compiled with scss cli compiler</p>
  
  <pre><code>//////////////////////* CUSTOM */
  @import "_material2-theme.scss";
  @import "_reset.scss";
  @import "_utilities.scss";
   //////////////////////* COMPONENTS */
   @import "~app/components/login/login.component.scss";
  </code></pre>
  
  <p><strong>My question is after the scss is compiled we have in html head many style tags some of them duplicated and look like</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/Vn36R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vn36R.png" alt="enter image description here"></a></p>
  
  <p>Everything seems to be compiled in one style that is added in head(tha one that has type attribute) and and after that each scss component splited in each css component with its separate style in head, and that is very weird. I am doing something wrong or is just tha way is working material2?</p>