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 + +``` + +## 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).