Mirrors/MaterialDesign
2
0
Fork 0
mirror of https://github.com/Templarian/MaterialDesign.git synced 2026-03-04 23:54:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2569 from Chan4077/patch-1

Browse Source 
Update angular material2 version to latest
This commit is contained in:
Austin Andrews
2017-10-29 16:47:11 -05:00
committed by GitHub
parent 60b9c11f0e 4771773231
commit 623153d2f9
1 changed files with 56 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
site/getting-started.savvy
View File

@@ -174,30 +174,41 @@ 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 2.x/4.x @download(Download for Angular Material v2 'mdi.svg', /api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)
## Angular 2.x/4.x @download(Download for Angular Material 'mdi.svg', /api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)
The `mdi.svg` contains all the icons provided on the site. Use inline with [MdIconRegistry](https://material.angular.io/components/icon/api).
The `mdi.svg` contains all the icons provided on the site. Use inline with [MatIconRegistry](https://material.angular.io/components/icon/api).
The following assumes that you're using the latest version of `@angular/material` (`2.0.0-beta.12`) and you already have the basic knowledge of Angular Material.
Place the SVG file under your `assets` folder. Please ensure that this file is publicly accessible.
In your app's module file (typically `app.module.ts`), add the following lines:
In your app's module file (typically `app.module.ts`), import `MatIconModule` and `MatIconRegistry` from `@angular/material`:
```typescript App module
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MdIconRegistry, MdIconModule } from '@angular/material';
import { MatIconRegistry, MatIconModule } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
/*
From the latest master, HttpClientModule is required instead
import { HttpClientModule } from '@angular/common/http';
*/
...
@NgModule([
imports: [
BrowserModule,
BrowserAnimationsModule,
// Your other modules
// Take note that you have to import MdIconModule into your app
MdIconModule
]
])
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpModule,
// From the latest master, HttpClientModule is required instead
// Your other modules
// Take note that you have to import MatIconModule into your app
MatIconModule
]
})
export class AppModule {
constructor(mdIconRegistry: MdIconRegistry, domSanitizer: DomSanitizer){
mdIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./src/assets/mdi.svg')); // Or whatever path you placed mdi.svg at
}
constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){
matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')); // Or whatever path you placed mdi.svg at
}
}
```
@@ -205,33 +216,45 @@ If you're using Angular CLI, make sure to include `assets` folder under `.angula
```json Angular CLI file
{
"apps": [
{
...
"assets": [
"assets"
]
}
]
"apps": [
{
"assets": [
"assets"
]
}
]
}
```
Usage:
```html Example Usage
<md-icon svgIcon="android"></md-icon>
<button md-icon-button>
<md-icon svgIcon="android"></md-icon>
<!-- Icon by itself -->
<mat-icon svgIcon="android"></mat-icon>
<!-- Icon button -->
<button mat-icon-button>
<mat-icon svgIcon="android"></mat-icon>
</button>
<!-- You can also combine an icon and text together -->
<button md-button>
<md-icon svgIcon="code-tags"></md-icon>
View source
<button mat-button>
<mat-icon svgIcon="code-tags"></mat-icon>
View source
</button>
```
[Demo](http://plnkr.co/edit/Qtn1XeKPUdQtY5hntFIF?p=preview)
Please also add the following class to your styles (`styles.css`) to solve the problem where an icon isn't aligned properly when used in a menu item:
For more information on icons, refer [here](https://material.angular.io/components/icon/overview).
```css styles.css
button.mat-menu-item {
line-height: 24px !important;
}
a.mat-menu-item > mat-icon {
margin-bottom: 14px;
}
```
[Demo](https://stackblitz.com/edit/mdi-material-example)
For more information on icons, refer to the [icon docs](https://material.angular.io/components/icon/overview).
## Angular JS @download(Download for AngularJS Material 'mdi.svg', /api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)
@@ -250,7 +273,7 @@ Usage:
```html Example Usage
<md-icon md-svg-icon="android"></md-icon>
<md-button aria-label="Android" class="md-icon-button">
<md-icon md-svg-icon="android"></md-icon>
<md-icon md-svg-icon="android"></md-icon>
</md-button>
```