web-dev-qa-db-fra.com

Comment utiliser <md-icon> dans Angular Material?

Je me demandais comment utiliser les icônes de Material, car cela ne fonctionne pas:

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

Je suppose qu'il y a un problème avec le chemin donné en tant que paramètre de l'attribut icon. Je voudrais savoir où se trouve ce dossier d'icônes?

angularjsmaterial-designangularjs-material
102
Adil Malik

Comme les autres réponses ne répondaient pas à mes préoccupations, j'ai décidé d'écrire ma propre réponse.

Le chemin indiqué dans l'attribut icon de la directive md-icon est l'URL d'un fichier .png ou .svg situé quelque part dans votre répertoire de fichiers statiques. Donc, vous devez mettre le bon chemin de ce fichier dans l'attribut icon. p.s place le fichier dans le bon répertoire pour que ton serveur puisse le servir.

Rappelez-vous que md-icon n'est pas comme les icônes bootstrap. Actuellement, il s’agit simplement d’une directive qui affiche un fichier .svg.

Mettre à jour

La conception des matériaux angulaires a beaucoup changé depuis que cette question a été posée.

Maintenant, il y a plusieurs façons d'utiliser md-icon

La première méthode consiste à utiliser les icônes SVG.

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

Exemple:

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

ou

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

: où getMyIcon est une méthode définie dans $scope.

ou <md-icon md-svg-icon="social:Android"></md-icon>

pour l'utiliser, vous devez utiliser le service $mdIconProvider pour configurer votre application avec svg iconsets.

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 deuxième méthode consiste à utiliser des icônes de police.

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

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

avant de faire cela, vous devez charger la bibliothèque de polices comme celle-ci.

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

ou utiliser des icônes de police avec des ligatures

<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>

Pour plus de détails, consultez notre

documentation relative à la directive de matériau angulaire mdIcon

$ mdIcon Service Documentation

$ mdIconProvider Service Documentation

150
Adil Malik

Le moyen le plus simple aujourd'hui serait simplement de demander la police Material Icons à Google Fonts, par exemple dans votre balise d'en-tête HTML:

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

ou dans votre feuille de style:

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

et ensuite utiliser comme icône de police avec des ligatures comme expliqué dans la directive directive md-icon . Par exemple:

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

La liste complète des icônes/ligatures se trouve à https://www.google.com/design/icons/

31
Jesús Carrera

Cela fonctionne réellement maintenant de Bower.

bower install material-design-icons --save

Il télécharge 37.1 KB. Ensuite, il extrait et installe. Vous verrez un dossier appelé material-design-icons dans le dossier bower_components. La taille totale est d'environ 299 Ko

28
rahul

les icônes md ne sont pas encore dans la version bower du matériau angulaire. J'utilise les icônes de Polymer , elles seront probablement les mêmes de toute façon.

bower install polymer/core-icons
6
Ryan Metin

Manière simple: utilisez le CDN suivant:

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

Injectez ngMdIcons à votre application angularjs:

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

Utilisez la directive ng-md-icon dans votre code HTML, en spécifiant fill-color via css:

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

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

5
Asqan

Dans leur dernière version, il existe une directive appelée md-icon

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>
3
sgimeno

Tous les préfixes md- sont maintenant mat- préfixes au moment de l'écriture de cette!

Mettez ceci dans votre tête html:

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

Import dans notre module:

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

Utilisez dans votre code:

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

Voici la dernière documentation:

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

1
Joshua Michael Calafell

En utilisant comme
utilise css et font au même endroit

@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;
}
0
Kamlesh
<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>

source: https://material.angularjs.org/#/demo/material.components.button

0
Zhorzh Alexandr