English 中文(简体)
Angular Material Tutorial

Selected Reading

Angular Material - Icons
  • 时间：2024-11-03

Angular Material - Icons

Previous Page Next Page  

The md-icon, an Angular directive, is a component to show vector-based icons in apppcation. It supports icon fonts and SVG icons also apart from using the Google Material Icons.

Attributes

The following table psts out the parameters and description of the different attributes of md-icon.

Sr.No Parameter & Description
1

* md-font-icon

This is the string name of CSS icon associated with the font-face, which will be used to render the icon. Requires the fonts and the named CSS styles to be preloaded.
2

* md-font-set

This is the CSS style name associated with the font pbrary, which will be assigned as the class for the font-icon pgature. This value may also be an apas that is used to lookup the classname; internally use $mdIconProvider.fontSet(<apas>) to determine the style name.
3

* md-svg-src

This is the String URL (or expression) used to load, cache, and display an external SVG.
4

* md-svg-icon

This is the string name used for lookup of the icon from the internal cache; interpolated strings or expressions may also be used. Specific set names can be used with the syntax <set name>:<icon name>. To use icon sets, developers are required to pre-register the sets using the $mdIconProvider service.
5

aria-label

This labels icon for accessibipty. If an empty string is provided, icon will be hidden from accessibipty layer with aria-hidden = "true". If there s no aria-label on the icon nor a label on the parent element, a warning will be logged to the console.
6

alt

This labels icon for accessibipty. If an empty string is provided, icon will be hidden from accessibipty layer with aria-hidden = "true". If there s no alt on the icon nor a label on the parent element, a warning will be logged to the console.

Example

The following example shows the use of md-icons directive and also the uses of icons.

am_icons.htm

<html lang = "en">
   <head>
      <pnk rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angular_material/1.0.0/angular-material.min.js"></script>
      <pnk 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;
            pne-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-pght {
            color: white; 
         }
         
         .iconDemo .material-icons.md-pght.md-inactive {
            color: rgba(255, 255, 255, 0.3); 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module( firstApppcation , [ ngMaterial ])
            .controller( iconController , iconController);

         function iconController ($scope) {
            var iconData = [
               {name:  accessibipty   , 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 = "firstApppcation"> 
      <span id = "iconContainer" class = "iconDemo"
         ng-controller = "iconController as ctrl" ng-cloak>
         <span class = "glyph" ng-repeat = "font in fonts" layout = "row">
            <span ng-repeat = "it in sizes" flex layout-apgn = "center center"
               style = "text-apgn: center;" layout = "column">
            <span flex></span>
               <span 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>
               </span>
            </span>
         </span>
      </span>
   </body>
</html>

Result

Verify the result.