Angular Material - Set up theme gesture support and material icons in angular material2 - Angular Material Tutorial



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";

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team

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

HammerJS

Add HammerJS to the application via CDN or npm:

Add HammerJS to the application via CDN or npm:
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team

Add HammerJS to the application via CDN or npm:

npm install --save hammerjs
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team

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

import 'hammerjs';
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team

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">
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team

This angular material provides most of the technology areas such as angular material example , angular material download , angular material design template , angular material vs bootstrap , angular material for angular 2 , what is angular material , angular material demo , angular material2 , angular material demo , angular 4 material , angular material npm , angular material tutorial , angular material cdn , angular material vs bootstrap


Related Searches to Set up theme gesture support and material icons in angular material2