angularjs - iconos - Cómo usar<md-icon> en Angular Material?
material icons facebook (9)
¡Todos los prefijos md- son ahora prefijos md- partir del 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 última documentación:
Me preguntaba cómo usar los iconos 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 para el atributo del icono. Me gustaría saber dónde está realmente esta carpeta de iconos?
Al usar como
utilizar css y font 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;
}
Como las otras respuestas no respondían a mi preocupación, decidí escribir mi propia respuesta.
La ruta dada en el atributo de md-icon directiva md-icon es la URL de un archivo .png o .svg que se encuentra en algún lugar de su directorio de archivos estáticos. Entonces debe colocar la ruta correcta de ese archivo en el atributo de icono. Ponga el archivo en el directorio correcto para que su servidor pueda servirlo.
Recuerde que md-icon no es como los iconos de arranque. Actualmente son simplemente una directiva que muestra un archivo .svg.
Actualizar
El diseño del material angular ha cambiado mucho desde que se publicó esta pregunta.
Ahora hay varias formas de usar md-icon
La primera forma es usar 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 getMyIcon es un método definido en $scope .
o <md-icon md-svg-icon="social:android"></md-icon>
para usar esto, debe $mdIconProvider servicio $mdIconProvider para configurar su aplicación con los 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 usar íconos 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 usa íconos 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 nuestra
Documentación de la directiva mdIcon de material angular
En su último lanzamiento hay una directiva llamada md-icon
<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>
La forma más sencilla en la actualidad 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 usar como ícono 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 está en https://www.google.com/design/icons/
Los íconos md aún no están en la versión de bower de material angular. He estado usando los iconos de Polymer , probablemente sean los mismos de todos modos.
bower install polymer/core-icons
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 en su aplicación angularjs:
angular.module(''demoapp'', [''ngMdIcons'']);
Use la directiva ng-md-icon en su html, especificando fill-colour por css:
<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon>
Realmente funciona ahora desde Bower.
bower install material-design-icons --save
Descarga 37.1 KBs. 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
<md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile">
<md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
fuente: https://material.angularjs.org/#/demo/material.components.button