1- Get  started with Angular Material using  the Angular CLI.
1+ For help getting  started with a new  Angular app, check out  the [ Angular CLI] ( https://cli.angular.io/ ) .
22
3- ## Install Angular CLI  
4-  
5-  ``` bash 
6-  npm install -g @angular/cli
7-  ``` 
8-  
9- ## Create a new project  
10-  
11-  ``` bash 
12-  ng new my-project
13-  ``` 
14- 
15- The new command creates a project with a build system for your Angular app.
3+ For existing apps, follow these steps to begin using Angular Material.
164
17- ## Install Angular Material components    
5+ ## Step 1:  Install Angular Material   
186
197``` bash 
208npm install --save @angular/material
219``` 
2210
23- ## Import the Angular Material NgModule  
11+ ## Step 2: Import the Module  
12+   
13+ Add MaterialModule as an import in your app's root NgModule.  
2414
25- ** src/app/app.module.ts** 
2615``` ts 
2716import  { MaterialModule  } from  ' @angular/material'  ;
28- //  other imports  
17+  
2918@NgModule ({
19+   ... 
3020  imports : [MaterialModule ],
3121  ... 
3222})
3323export  class  PizzaPartyAppModule  { }
3424``` 
3525
36- ## Include the core and theme styles:  
37- This is  ** required **  to apply all of the core and theme styles to your application. You can either 
38- use  a pre-built  theme, or define your own custom  theme. 
26+ ## Step 3: Include Theming  
27+ 
28+ Including  a theme is  ** required **  to apply all of the core and  theme styles to your application.  
3929
40- :trident :   See the [ theming guide] ( ./theming.md )  for instructions.
30+ To get started with a prebuilt theme, include the following in your app's index.html:
31+ 
32+ ``` html 
33+ <link  href =" node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css"   rel =" stylesheet"  >
34+ ``` 
35+ 
36+ Note that your app's project structure may have a different relative location for your node_modules.
37+ 
38+ For more information on theming and instructions on how to create a custom theme, see the [ theming guide] ( ./theming.md ) .
39+ 
40+ ## Step 4: Gesture Support  
4141
42- ### Additional setup for gestures  
4342Some components (` md-slide-toggle ` , ` md-slider ` , ` mdTooltip ` ) rely on 
4443[ HammerJS] ( http://hammerjs.github.io/ )  for gestures. In order to get the full feature-set of these
4544components, HammerJS must be loaded into the application.
@@ -48,42 +47,45 @@ You can add HammerJS to your application via [npm](https://www.npmjs.com/package
4847(such as the [ Google CDN] ( https://developers.google.com/speed/libraries/#hammerjs ) ), or served 
4948directly from your app.
5049
51- #### If you want to include HammerJS from npm, you can install it:  
52- 
50+ To install via npm, use the following command:
5351``` bash 
54- npm install --save hammerjs  
52+ npm install --save hammerjs
5553``` 
5654
57- After installing, import HammerJS on your app's module.
58- ** src/app/app.module.ts** 
55+ After installing, import it on your app's root module.
5956``` ts 
6057import  ' hammerjs'  ;
6158``` 
6259
60+ ## Step 5 (Optional): Add Material Icons  
61+ 
62+ If you want your ` md-icon `  components to use [ Material Icons] ( https://material.io/icons/ ) , load the font in your ` index.html ` .
63+   
64+ ``` html 
65+ <link  href =" https://fonts.googleapis.com/icon?family=Material+Icons"   rel =" stylesheet"  >
66+ ``` 
67+ 
68+ For more information on using Material Icons, check out the [ Material Icons Guide] ( https://google.github.io/material-design-icons/ ) .
69+ 
70+ Note that ` md-icon `  has support for any font or svg icons, so using Material Icons is just one option.
71+        
72+ 
6373## Configuring SystemJS  
74+ 
6475If your project is using SystemJS for module loading, you will need to add ` @angular/material `  
6576to the SystemJS configuration:
6677
6778``` js 
6879System .config ({
6980  //  existing configuration options
7081  map:  {
71-     ... ,
72-     ' @angular/material' :  ' npm:@angular/material/bundles/material.umd.js' 
82+     ... 
83+     ' @angular/material' :  ' npm:@angular/material/bundles/material.umd.js'  ,
84+     ... 
7385  }
7486});
7587``` 
7688
77- ### [ Optional]  Using Material Design icons with ` md-icon ` : 
78- 
79- -  If you want to use Material Design icons in addition to Angular Material components, 
80- load the Material Design font in your ` index.html ` .  
81- ` md-icon `  supports any font icons or svg icons, so this is only one option for an icon source.
82-        
83- ** src/index.html** 
84- ``` html 
85- <link  href =" https://fonts.googleapis.com/icon?family=Material+Icons"   rel =" stylesheet"  >
86- ``` 
8789
8890## Sample Angular Material projects  
8991-  [ Material Sample App] ( https://github.com/jelbourn/material2-app ) 
0 commit comments