From 5ba5a2a1102d041f77489a824e77a3f8b979af9c Mon Sep 17 00:00:00 2001
From: Axel Le Bot <axellebot@users.noreply.github.com>
Date: Fri, 18 Aug 2017 19:53:52 +0200
Subject: [PATCH] [TASK] Added Angular 2 config

- Added Angular 2 config
- Edited Angular JS config
From @Chan4077 on stackoverflow (https://stackoverflow.com/questions/44677960/how-to-use-material-design-icons-in-angular-4)
---
 site/getting-started.savvy | 48 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/site/getting-started.savvy b/site/getting-started.savvy
index e9d7af1c6..c5f8b151f 100644
--- a/site/getting-started.savvy
+++ b/site/getting-started.savvy
@@ -174,7 +174,53 @@ Android uses the Vector Drawable format that is similar to SVG. Right click any
 
 Windows uses the vector XAML format. Right click any icon on the site and click the "View XAML" item in the context menu.
 
-## Angular Material @download(Download for Angular Material v1 'mdi.svg', /api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)
+## Angular 2 @download(Download for Angular Material v1 'mdi.svg', /api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)
+
+The `mdi.svg` contains all the icons provided on the site. Use inline with [$mdIconProvider](https://material.angularjs.org/latest/api/service/$mdIconProvider).
+
+In your `app.module.ts`, add the following lines:
+
+```typescript app.module.ts
+import {MdIconRegistry} from '@angular/material';
+import {DomSanitizer} from '@angular/platform-browser';
+...
+export class AppModule {
+    constructor(private mdIconRegistry: MdIconRegistry, private domSanitizer: DomSanitizer){
+        mdIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('app/assets/mdi.svg'));
+    }
+}
+```
+
+Make sure to include assets folder under `.angular-cli.json` in assets (Although by default, it will be there):
+
+```json .angular-cli.json
+{
+     "apps": [
+         {
+              ...
+              "assets": [
+                  "assets"
+              ]
+         }
+     ]
+}
+```
+
+Also add the following to your CSS:
+
+```css styles.css
+.mat-icon svg {
+    height: 24px;
+    width: 24px;
+}
+```
+
+Usage:
+```html Example Usage
+<md-icon svgIcon="android"></md-icon>
+```
+
+## Angular JS @download(Download for Angular Material v1 'mdi.svg', /api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)
 
 The `mdi.svg` contains all the icons provided on the site. Use inline with [$mdIconProvider](https://material.angularjs.org/latest/api/service/$mdIconProvider).