Matériel angulaire - Icônes

le md-icon, une directive angulaire, est un composant permettant d'afficher des icônes vectorielles dans l'application. Il prend en charge les polices d'icônes et les icônes SVG, en plus d'utiliser les icônes de matériau Google.

Les attributs

Le tableau suivant répertorie les paramètres et la description des différents attributs de md-icon.

Sr. Non Paramètre et description
1

* md-font-icon

Il s'agit du nom de chaîne de l'icône CSS associée à la police, qui sera utilisée pour rendre l'icône. Nécessite que les polices et les styles CSS nommés soient préchargés.
2

* md-font-set

Il s'agit du nom de style CSS associé à la bibliothèque de polices, qui sera attribué comme classe pour la ligature police-icône. Cette valeur peut également être un alias utilisé pour rechercher le nom de classe; utilisez en interne $ mdIconProvider.fontSet (<alias>) pour déterminer le nom du style.
3

* md-svg-src

Il s'agit de l'URL (ou expression) de chaîne utilisée pour charger, mettre en cache et afficher un SVG externe.
4

* md-svg-icon

Il s'agit du nom de chaîne utilisé pour la recherche de l'icône dans le cache interne; des chaînes ou expressions interpolées peuvent également être utilisées. Des noms d'ensemble spécifiques peuvent être utilisés avec la syntaxe <nom d'ensemble>: <nom d'icône>. Pour utiliser des jeux d'icônes, les développeurs doivent pré-enregistrer les jeux à l'aide du service $ mdIconProvider.
5

aria-label

Cette icône d'étiquettes d'accessibilité. Si une chaîne vide est fournie, l'icône sera masquée de la couche d'accessibilité avec aria-hidden = "true". S'il n'y a pas d'étiquette aria sur l'icône ni d'étiquette sur l'élément parent, un avertissement sera enregistré dans la console.
6

alt

Cette icône d'étiquettes d'accessibilité. Si une chaîne vide est fournie, l'icône sera masquée de la couche d'accessibilité avec aria-hidden = "true". S'il n'y a pas d'alt sur l'icône ni d'étiquette sur l'élément parent, un avertissement sera enregistré dans la console.

Exemple

L'exemple suivant montre l'utilisation de la directive md-icons ainsi que les utilisations des icônes.

am_icons.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         .iconDemo .glyph {
            border-bottom: 1px dotted #ccc;
            padding: 10px 0 20px;
            margin-bottom: 20px; 
         }
         
         .iconDemo .preview-glyphs {
            display: flex;
            flex-direction: row; 
         }
         
         .iconDemo .step {
            flex-grow: 1;
            line-height: 0.5; 
         }
         
         .iconDemo .material-icons.md-18 {
            font-size: 18px; 
         }
         
         .iconDemo .material-icons.md-24 {
            font-size: 24px; 
         }
         
         .iconDemo .material-icons.md-36 {
            font-size: 36px; 
         }
         
         .iconDemo .material-icons.md-48 {
            font-size: 48px; 
         }
         
         .iconDemo .material-icons.md-dark {
            color: rgba(0, 0, 0, 0.54); 
         }
         
         .iconDemo .material-icons.md-dark.md-inactive {
            color: rgba(0, 0, 0, 0.26); 
         }
         
         .iconDemo .material-icons.md-light {
            color: white; 
         }
         
         .iconDemo .material-icons.md-light.md-inactive {
            color: rgba(255, 255, 255, 0.3); 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('iconController', iconController);

         function iconController ($scope) {
            var iconData = [
               {name: 'accessibility'  , color: "#777" },
               {name: 'question_answer', color: "rgb(89, 226, 168)" },
               {name: 'backup'         , color: "#A00" },
               {name: 'email'          , color: "#00A" }
            ];
            
            $scope.fonts = [].concat(iconData);            
            $scope.sizes = [
               {size:"md-18",padding:0},
               {size:"md-24",padding:2},
               {size:"md-36",padding:6},
               {size:"md-48",padding:10}
            ];
         }                 
      </script>     	  
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "iconContainer" class = "iconDemo"
         ng-controller = "iconController as ctrl" ng-cloak>
         <div class = "glyph" ng-repeat = "font in fonts" layout = "row">
            <div ng-repeat = "it in sizes" flex layout-align = "center center"
               style = "text-align: center;" layout = "column">
            <div flex></div>
               <div class = "preview-glyphs">
                  <md-icon ng-style = "{color: font.color}"
                     aria-label = "{{ font.name }}"
                     class = "material-icons step"
                     ng-class = "it.size">
                     {{ font.name }}
                  </md-icon>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.