angular-material2 Getting started with angular-material2 Set up theme, gesture support and material icons

Example

---

Theme:

A theme is required for material components to work properly within the application.

Angular Material 2 provides four prebuilt themes:

• deeppurple-amber
• indigo-pink
• pink-bluegrey
• purple-green

If you are using Angular CLI, you can import one of the prebuilt themes in style.css.

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

Theme can be added using <link> in index.html as well.

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

---

HammerJS

Add HammerJS to the application via CDN or npm:

npm install --save hammerjs

In your root module, usually app.module.ts, add the import statement:

import 'hammerjs';

---

Material Icons:

Unless, custom icons provided, Angular Material 2 <md-icon> expects Material Icons.

In index.html add:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">