¿Cómo usar <md-icon> en Angular Material?


102

Me preguntaba cómo usar los íconos de Material, ya que esto no funciona:

<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon> 

Supongo que hay un problema con la ruta dada como parámetro al atributo del icono. Me gustaría saber dónde está realmente esta carpeta de iconos.

Respuestas:


151

Como las otras respuestas no abordaron mi preocupación, decidí escribir mi propia respuesta.

La ruta dada en el atributo de icono de la md-icondirectiva es la URL de un archivo .png o .svg que se encuentra en algún lugar de su directorio de archivos estáticos. Por lo tanto, debe poner la ruta correcta de ese archivo en el atributo de icono. ps coloque el archivo en el directorio correcto para que su servidor pueda servirlo.

Recuerde md-iconque no es como los iconos de arranque. Actualmente son simplemente una directiva que muestra un archivo .svg.

Actualizar

El diseño de material angular ha cambiado mucho desde que se publicó esta pregunta.

Ahora hay varias formas de usar md-icon

La primera forma es utilizar iconos SVG.

<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>

Ejemplo:

<md-icon md-svg-src = '/static/img/android.svg'></md-icon>

o

<md-icon md-svg-src = '{{ getMyIcon() }}'></md-icon>

: donde getMyIcones un método definido en $scope.

o <md-icon md-svg-icon="social:android"></md-icon>

para usar esto, tiene $mdIconProviderque configurar el servicio para configurar su aplicación con conjuntos de iconos svg.

angular.module('appSvgIconSets', ['ngMaterial'])  
  .controller('DemoCtrl', function($scope) {})  
  .config(function($mdIconProvider) {
    $mdIconProvider
      .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
      .defaultIconSet('img/icons/sets/core-icons.svg', 24);    
  });

La segunda forma es utilizar iconos de fuentes.

<md-icon md-font-icon="android" alt="android"></md-icon>

<md-icon md-font-icon="fa-magic" class="fa" alt="magic wand"></md-icon>

antes de hacer esto, debe cargar la biblioteca de fuentes de esta manera ...

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

o use iconos de fuentes con ligaduras

<md-icon md-font-library="material-icons">face</md-icon>

<md-icon md-font-library="material-icons">#xE87C;</md-icon>

<md-icon md-font-library="material-icons" class="md-light md-48">face</md-icon>

Para más detalles consulte nuestro

Documentación de la directiva mdIcon de material angular

Documentación del servicio $ mdIcon

Documentación del servicio $ mdIconProvider


1
Nota rápida sobre las ligaduras: use guiones bajos en lugar de guiones. Probablemente esté documentado en algún lugar de los enlaces de más detalles, pero nadie tiene tiempo para eso. ;-)
Olson.dev

¿Cuál es la forma correcta de colorearlos?
theblang

@mattblang si los usa como ícono de fuente, entonces es solo una fuente. Por lo tanto, establecer el color del texto en css (como {color: red}) los coloreará.
tanou

1
Exactamente lo que necesitaba. Estaba luchando con el estilo mientras lo usaba <i class='material-icons'>icon_name</i>, pero md-font-libraryresolví mi problema perfectamente.
Pieter VDE

¿Por qué usar una variable en md-icon no funciona? como <md-icon md-font-library = "material-icons"> {{user.type}} </md-icon> .. en este caso user.type = "face" y usar como texto funciona < md-icon md-font-library = "material-icons"> rostro </md-icon>
mariomol

31

La forma más sencilla hoy en día sería simplemente solicitar la fuente Material Icons de Google Fonts, por ejemplo, en su etiqueta de encabezado HTML:

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

o en tu hoja de estilo:

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

y luego utilícelo como icono de fuente con ligaduras como se explica en la directiva md-icon . Por ejemplo:

<md-icon aria-label="Menu" class="material-icons">menu</md-icon>

La lista completa de iconos / ligaduras se encuentra en https://www.google.com/design/icons/


¿Cómo agregar un ícono a un botón?
Alexander Mills

28

De hecho, ahora funciona desde Bower.

bower install material-design-icons --save

Descarga 37,1 KB. Luego extrae e instala. Verá una carpeta llamada material-design-icons en la carpeta bower_components. El tamaño total es de alrededor de 299 KB.


20
¿Y cómo usarlo entonces?
Ernst Ernst

6

md-icons aún no están en la versión de bower de material angular. He estado usando los íconos de Polymer , probablemente serán los mismos de todos modos.

bower install polymer/core-icons

5

Manera fácil: use el siguiente CDN:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script> 

Inyecte ngMdIcons a su aplicación angularjs:

angular.module('demoapp', ['ngMdIcons']);

Use la directiva ng-md-icon en su html, especificando el color de relleno a través de css:

<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon> 

Fuente: https://klarsys.github.io/angular-material-icons/


2
su molesto ng-mdno centra el icono en los botones de icono como lo hace md-icon.
Mustafa

sí, el mismo problema aquí. principalmente tendrás que refinar las posiciones con css. position:relative;y luego mueva el elemento svg o contenedor by left-top-right-bottoma la mejor posición que desee.
Asqan


1

¡Todos los md-prefijos son ahora mat-prefijos al momento de escribir esto!

Pon esto en tu cabeza html:

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

Importar en nuestro módulo:

import { MatIconModule } from '@angular/material';

Use en su código:

<mat-icon>face</mat-icon>

Aquí está la documentación más reciente:

https://material.angular.io/components/icon/overview


OP está utilizando AngularJS Material.
Edric


0

Al usar like,
use css y fuente en la misma ubicación

@font-face {
    font-family: 'Material-Design-Icons';
    src: url('Material-Design-Icons.eot');
    src: url('Material-Design-Icons.eot?#iefix') format('embedded-opentype'),
         url('Material-Design-Icons.woff2') format('woff2'),
         url('Material-Design-Icons.woff') format('woff'),
         url('Material-Design-Icons.ttf') format('truetype'),
         url('Material-Design-Icons.svg#ge_dinar_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.