Angular 2 Material Cheat Sheet (DRAFT) by walkernel

Create palette.scss in /src


palette.scss:
@import '~@angular/material/src/lib/core/theming/all-theme';

@include md-core();

$YourApp-app-primary: md-palette(PimaryColor);
$YourApp-app-accent: md-palette(AccentColor);
$YourApp-app-warn: md-palette(WarnColor);

$YourApp-app-theme: md-light-theme($YourApp-app-primary, $YourApp-app-accent, $YourApp-app-warn);

Add palette.scss to the styles array in angular-cli.json

angular-cli.json:
{
...,
"apps": [
    ...,
    "styles": [
        ...,
        palette.scss,
        ...
        ].
     ],
...
}

CMD
npm install --save @angul­ar/­mat­erial

src/ap­p/a­pp.m­od­ule.ts
import { Materi­alM­odule } from '@angu­lar­/ma­ter­ial';
...
@NgMod­ule({
imports: [Mater­ial­Mod­ule.fo­rRo­ot()],
...
})

YourCo­mponent.compo­nen­t.css

@import '~@ang­ula­r/m­ate­ria­l/s­rc/­lib­/co­re/­the­min­g/t­hem­ing';
@import 'src/p­ale­tte.scss';

// Use md-color to extract individual colors from a palette as necessary.
.YourClass {
 ­ ­ ­  backgr­oun­d-c­olor: md-color($YourApp-app-p­rim­ary);
 ­ ­ ­ border­-color: md-color($YourApp-app-a­ccent);
}