material.module.ts & theme.scss file for angular-cli to do all the material.angular.io stuff

material.module.ts

/*
  load this in the app.module.ts file with these lines:
  import { MaterialModule } from './material/material.module';
  imports: [
    ...,
    ...,
    ...,
    MaterialModule
  ],

*/

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MdButtonModule,
  MdCheckboxModule,
  MdListModule,
  MdIconModule,
  MdTabsModule,
  MdToolbarModule,
  MdCardModule,
  MdSidenavModule
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    MdButtonModule,
    MdCheckboxModule,
    BrowserAnimationsModule,
    MdListModule,
    MdIconModule,
    MdTabsModule,
    MdToolbarModule,
    MdCardModule,
    MdSidenavModule],
  exports: [
    MdButtonModule,
    MdCheckboxModule,
    BrowserAnimationsModule,
    MdListModule,
    MdIconModule,
    MdTabsModule,
    MdToolbarModule,
    MdCardModule,
    MdSidenavModule],
})
export class MaterialModule { }

theme.scss

/* put this file next to styles.css and add it to the array in .angular-cli.json */

/* Import Material Icons from Google (still need SCSS below for colours) */

        @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* SCSS required to make the colours in the material icons work - otherwise all black and ugly
   Lifted straight from http://google.github.io/material-design-icons */
   
        /* Rules for sizing the icon. */
        .material-icons.md-18 { font-size: 18px; }
        .material-icons.md-24 { font-size: 24px; }
        .material-icons.md-36 { font-size: 36px; }
        .material-icons.md-48 { font-size: 48px; }

        /* Rules for using icons as black on a light background. */
        .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
        .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

        /* Rules for using icons as white on a dark background. */
        .material-icons.md-light { color: rgba(255, 255, 255, 1); }
        .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

        .material-icons.md-18 { font-size: 18px; }
        .material-icons.md-24 { font-size: 24px; }
        .material-icons.md-36 { font-size: 36px; }
        .material-icons.md-48 { font-size: 48px; }

        /* To set a custom icon color, define a CSS rule specifying the desired color for the font: */

        .material-icons.orange600 { color: #FB8C00; }

/* Import Roboto fonts */

        @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,900');

/* below is taken from https://material.angular.io/guide/theming */

        @import '~@angular/material/theming';
        // Plus imports for other components in your app.

        // Include the common styles for Angular Material. We include this here so that you only
        // have to load a single css file for Angular Material in your app.
        // Be sure that you only ever include this mixin once!
        @include mat-core();

        // Define the palettes for your theme using the Material Design palettes available in palette.scss
        // (imported above). For each palette, you can optionally specify a default, lighter, and darker
        // hue.
        $candy-app-primary: mat-palette($mat-indigo);
        $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

        // The warn palette is optional (defaults to red).
        $candy-app-warn:    mat-palette($mat-red);

        // Create the theme object (a Sass map containing all of the palettes).
        $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

        // Include theme styles for core and each component used in your app.
        // Alternatively, you can import and @include the theme mixins for each component
        // that you are using.
        @include angular-material-theme($candy-app-theme);

// /* below is created  by:
// npm install --save material-design-icons
// taking scss from http://google.github.io/material-design-icons/#icon-font-for-the-web
// and putting the url in for the node modules below
// ONLY REQUIRED IF WANT TO USE LOCAL NODE MODULE RATHER THAN FROM WEB */

        // @font-face {
        //   font-family: 'Material Icons';
        //   font-style: normal;
        //   font-weight: 400;
        //   src: url(/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
        //   src: local('Material Icons'),
        //     local('MaterialIcons-Regular'),
        //     url(/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
        //     url(/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        //     url(/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
        // }

        // .material-icons {
        //   font-family: 'Material Icons';
        //   font-weight: normal;
        //   font-style: normal;
        //   font-size: 24px;  /* Preferred icon size */
        //   display: inline-block;
        //   line-height: 1;
        //   text-transform: none;
        //   letter-spacing: normal;
        //   word-wrap: normal;
        //   white-space: nowrap;
        //   direction: ltr;

        //   /* Support for all WebKit browsers. */
        //   -webkit-font-smoothing: antialiased;
        //   /* Support for Safari and Chrome. */
        //   text-rendering: optimizeLegibility;

        //   /* Support for Firefox. */
        //   -moz-osx-font-smoothing: grayscale;

        //   /* Support for IE. */
        //   font-feature-settings: 'liga';
        // }