Material angular - Iconos

los md-icon, una directiva Angular, es un componente para mostrar iconos basados en vectores en la aplicación. También admite fuentes de iconos e iconos SVG, además de utilizar los iconos de material de Google.

Atributos

La siguiente tabla enumera los parámetros y la descripción de los diferentes atributos de md-icon.

No Señor	Descripción de parámetros
1	* md-font-icon Este es el nombre de cadena del icono CSS asociado con la fuente-face, que se utilizará para representar el icono. Requiere que las fuentes y los estilos CSS nombrados estén precargados.
2	* md-font-set Este es el nombre de estilo CSS asociado con la biblioteca de fuentes, que se asignará como clase para la ligadura de icono de fuente. Este valor también puede ser un alias que se utiliza para buscar el nombre de la clase; use internamente $ mdIconProvider.fontSet (<alias>) para determinar el nombre del estilo.
3	* md-svg-src Esta es la URL de cadena (o expresión) utilizada para cargar, almacenar en caché y mostrar un SVG externo.
4	* md-svg-icon Este es el nombre de la cadena que se usa para buscar el icono en la caché interna; también se pueden usar cadenas o expresiones interpoladas. Se pueden utilizar nombres de conjuntos específicos con la sintaxis <nombre de conjunto>: <nombre de icono>. Para usar conjuntos de iconos, los desarrolladores deben prerregistrar los conjuntos utilizando el servicio $ mdIconProvider.
5	aria-label Este icono de etiquetas para accesibilidad. Si se proporciona una cadena vacía, el icono se ocultará de la capa de accesibilidad con aria-hidden = "true". Si no hay una etiqueta aria en el icono ni una etiqueta en el elemento principal, se registrará una advertencia en la consola.
6	alt Este icono de etiquetas para accesibilidad. Si se proporciona una cadena vacía, el icono se ocultará de la capa de accesibilidad con aria-hidden = "true". Si no hay alt en el icono ni una etiqueta en el elemento principal, se registrará una advertencia en la consola.

Ejemplo

El siguiente ejemplo muestra el uso de la directiva md-icons y también los usos de los iconos.

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>

Resultado

Verifique el resultado.

↰ Previous page Next page ↱