Angular Material позволяет добавить компоненты Material Design в Angular 2+ приложения. Целью проекта является создания полного набора компонентов что сделает возможным легкое создания веб-интерфейсов для мобильных клиентов и десктопов. Последний релиз Angular Material требует Angular версии 4+.
И так начнем разбираться, как начать использовать Angular Material 2:

1. Добавьте зависимости angular-material & hammerjs

Сначала установите Angular Material, Angular animations, и Hammer.js с помощью следующих команд

$ npm install --save @angular/material @angular/animations @angular/cdk
$ npm install --save hammerjs

Hammer.js необязательная зависимость которая добавляет поддержку touch-экранов для нескольких компонентов.

2. angular-cli.json

Если вы решили использовать Hammer.js и вы создали свой проект с помощью Angular CLI, добавить библиотеку Hammer.js в файл angular-cli.json. Найдите поле “scripts” и добавьте такую строку

"scripts": [
"../node_modules/hammerjs/hammer.min.js"
],

Вам необходимо будет перезапустить ваш локальный сервер, чтобы изменения в angular-cli.json вступили в силу.

3. Кастомный Material модуль

До Angular Material 2 Beta 3, существовал глобальный модуль MaterialModule который мог был импортирован в приложения чтобы сделать компоненты доступными. Негативной стороной такого похода было то что tree-shaking не настолько эффективен чтобы удалить весь неиспользуемый код.
поэтому MaterialModule был объявлен устаревшим в в пользу определения специфичного для проекта material модуля, в котором импортируются и экспортируются только нужные компоненты. Ниже приведен пример такого модуля:

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

4. Добавьте Angular Material в ваш app модуль

Импортируйте MaterialModule и добавьте его в свои импорты. Также вам нужно импортировать необходимые анимации для вашего модуля. Ваш app.module.ts должен выглядеть примерно так

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Импортируйте собранную тему и Material icons

Существует несколько готовых тем которые устанавливаются автоматически с Angular Material. Они устанавливают базовые стили и цвета. Доступны такие темы: indigo-pink, deeppurple-amber, purple-green и pink-bluegrey
Чтобы импортировать тему, добавьте импорт в ваш глобальный styles.css файл

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Также вы можете получить доступ к Material Design иконкам  и использовать именованные иконки с помощью компонента . Для импорта их в проект, добавьте следующую строку в секцию head кореневого index.html файла

6. Angular Material готов к использованию

Теперь вы готовы приступить к использованию доступных компонентов Material Design в ваших шаблонах. Вот пример разметки для шаблона приложения:

<div>
  <mat-toolbar color="primary">
    <span><mat-icon>mood</mat-icon></span>

    <span>Yay, Material in Angular 2!</span>

    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>
  </mat-menu>

  <mat-card>
    <button mat-button>All</button>
    <button mat-raised-button>Of</button>
    <button mat-raised-button color="primary">The</button>
    <button mat-raised-button color="accent">Buttons</button>
  </mat-card>

  <span class="done">
    <button mat-fab>
      <mat-icon>check circle</mat-icon>
    </button>
  </span>
</div>

Ресурсы для дальнейшего изучения

Angular Material 2 Quick Reference
Angular Material: Creating a Custom Theme
Dialogs With Angular Materia
Пример приложения
Демо https://material2-app.firebaseapp.com/
Репозиторий GitHub https://github.com/jelbourn/material2-app