reactivos - pasar parametros entre componentes angular 4

Usando iconos de material angular 2

Question

Estoy tratando de usar el material angular 2 para mostrar iconos en mi sitio web, pero estoy un poco confundido.

Así es como se supone que funciona, desde la demostración en github repo del material 2:

https://github.com/angular/material2/blob/master/src/demo-app/icon/icon-demo.ts

He estado tratando de usarlo pero no se muestran iconos en absoluto.

Así es como lo configuro:

app.component.ts

import {MdIcon, MdIconRegistry} from ''@angular2-material/icon/icon'';

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  viewProviders: [MdIconRegistry],
  directives: [MdIcon],
})
export class MyComponent{
  constructor(private router: Router,
              private JwtService:JwtService,
              mdIconRegistry: MdIconRegistry){
    mdIconRegistry.addSvgIconSetInNamespace(''core'', ''fonts/core-icon-set.svg'')
  }
}

y la plantilla ..

<md-icon>home</md-icon>

La página se carga sin errores, pero no se muestra ningún icono. ¿Qué podría haber salido mal?

Answer 1

A partir de la introducción de @ngModule partir de la sintaxis de Angular RC5 sería la siguiente:

app-example-module.ts

import { MdIconModule, MdIconRegistry } from ''@angular2-material/icon'';

@NgModule({
    imports: [
        MdIconModule
    ]
    providers: [
        MdIconRegistry
    ]
})

export class AppExampleModule {
    //
}

app-example-component.ts

@Component({

    selector: ''app-header'',
    template: `<md-icon svgIcon="close"></md-icon>`
})


export class AppExampleComponent
{
    constructor(private mdIconRegistry: MdIconRegistry) {
        mdIconRegistry
            .addSvgIcon(''close'', ''/icons/navigation/ic_close_36px.svg'');
    }
}

Answer 2

Dentro de style.css, copie y pegue lo siguiente: ---

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

y usar como:

<md-icon>menu</md-icon>
          ^--- icon name

Answer 3

En angular 4.3.3 con @ angular / material 2.0.0-beta-7 también necesita desinfectar la url.

import { DomSanitizer } from ''@angular/platform-browser'';

export class AppComponent
{
    constructor(
        private domSanitizer: DomSanitizer,
        private mdIconRegistry: MdIconRegistry) {
        mdIconRegistry.addSvgIcon(''twitter'', domSanitizer.bypassSecurityTrustResourceUrl(''/assets/icons/twitter.svg''));
    }
}

Answer 4

Este es el camino, lo intenté y funciona.

mdIconRegistry.addSvgIcon(''slider'', sanitizer.bypassSecurityTrustResourceUrl(''./assets/controls/slider.svg''));

La instancia mdIconRegistry estará disponible a través de DI y agregará svg personalizado usando el método addSvgIcon . Luego use <md-icon svgIcon="slider"> en su plantilla.

Answer 5

Para trabajar sin conexión / local (proporcione css desde su servidor):

1. npm instalar material-design-icons --save
2. en src / styles.css agregue @import "~material-design-icons/iconfont/material-icons.css";

Answer 6

Para utilizar MdIcon , debe incluir los archivos css correspondientes. En su código, está usando la fuente predeterminada que es Material Icons de google.

Desde el repositorio angular-material2 :

Por defecto se usa la fuente de iconos de material . (Todavía deberá incluir el HTML para cargar la fuente y su CSS, como se describe en el enlace).

Simplemente, simplemente incluya el css en index.html como este:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

O puede elegir cualquier otro método de importación mencionado en el repositorio oficial:

http://google.github.io/material-design-icons/#icon-font-for-the-web

Answer 7

Solo agrega la siguiente línea en index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Answer 8

También es necesario importar Http .

import {HTTP_PROVIDERS} from ''@angular/http'';
import {MdIcon, MdIconRegistry} from  ''@angular2-material/icon'';
@Component({
    template:`<md-icon>code</md-icon>`
    directives:[MdIcon],
    providers: [HTTP_PROVIDERS, MdIconRegistry]
})

Answer 9

Vale la pena saber que para usar un espacio de iconos separado (por ejemplo, carga de archivos) necesitamos usar el guión bajo _. Por ejemplo:

<md-icon>file_upload</md-icon>