title: @angular/material styles in a single stylesheet
body: <p>I want to move all the styles into a single stylesheet, no individual component styles. I can control my styles, however when I include @angular/material components, they are added as individual style tags:</p>
  
  <p><a href="https://i.stack.imgur.com/j7zMN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j7zMN.png" alt="Renders "></a></p>
  
  <p>I have a single styles.scss file, which already includes the material designs according to the <a href="https://material.angular.io/guide/theming" rel="nofollow noreferrer">docu</a>.</p>
  
  <pre><code>// Include the default theme styles.
  @include angular-material-theme($candy-app-theme);
  </code></pre>
  
  <p>How can I also add all the components into the single stylesheet?</p>
  
  <p>Edit: this is how the <code>@angular/material</code> modules are added:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import {
    MatButtonModule,
    MatGridListModule,
    MatIconModule,
    MatListModule,
    MatSidenavModule,
    MatToolbarModule,
  } from '@angular/material';
  
  @NgModule({
    exports: [
      MatButtonModule,
      MatGridListModule,
      MatIconModule,
      MatListModule,
      MatSidenavModule,
      MatToolbarModule,
    ]
  })
  export class MaterialModule { }
  </code></pre>