title: Angular 4 - Material Theme customization
body: <p>I'm trying to set my custom theme in Angular Material. My problem is when i want to import mixin angular-material-theme, i'm getting this error: </p>
  
  <blockquote>
    <p>ERROR in
    ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/theme.scss
    Module build failed: undefined
             ^
          Argument <code>$map</code> of <code>map-get($map, $key)</code> must be a map</p>
    
    <p>Backtrace:
            node_modules/@angular/material/_theming.scss:1166, in function <code>map-get</code>
            node_modules/@angular/material/_theming.scss:1166, in function <code>mat-color</code>
            node_modules/@angular/material/_theming.scss:1325, in mixin <code>mat-option-theme</code>
            node_modules/@angular/material/_theming.scss:3739, in mixin <code>mat-core-theme</code>
            node_modules/@angular/material/_theming.scss:3808, in mixin <code>angular-material-theme</code>
            stdin:12
          in E:\PC_SHOP\pcShop-Final\PcShop-Final\node_modules\@angular\material_theming.scss
    (line 1166, column 11)</p>
  </blockquote>
  
  <p>My sass code:</p>
  
  <pre><code>@import "~@angular/material/prebuilt-themes/indigo-pink.css";
  @import '~@angular/material/_theming.scss';
  
  @include mat-core();
  
  $primary: mat-pallete($mat-orange, 500);
  $accent: mat-palette($mat-blue-grey, 800);
  $warn: mat-palette($mat-pink, 400);
  
  $app-theme: mat-light-theme($primary, $accent, $warn);
  
  @include angular-material-theme($app-theme);
  </code></pre>