Bahan Sudut - Ikon

Itu md-icon, direktif Angular, adalah komponen untuk menampilkan ikon berbasis vektor dalam aplikasi. Ini mendukung font ikon dan ikon SVG juga selain menggunakan Ikon Material Google.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-icon.

Sr Tidak Parameter & Deskripsi
1

* md-font-icon

Ini adalah nama string ikon CSS yang terkait dengan font-face, yang akan digunakan untuk membuat ikon. Membutuhkan font dan gaya CSS yang diberi nama untuk dimuat sebelumnya.

2

* md-font-set

Ini adalah nama gaya CSS yang terkait dengan pustaka font, yang akan ditetapkan sebagai kelas untuk pengikat font-icon. Nilai ini juga dapat berupa alias yang digunakan untuk mencari nama kelas; gunakan $ mdIconProvider.fontSet (<alias>) secara internal untuk menentukan nama gaya.

3

* md-svg-src

Ini adalah String URL (atau ekspresi) yang digunakan untuk memuat, meng-cache, dan menampilkan SVG eksternal.

4

* md-svg-icon

Ini adalah nama string yang digunakan untuk mencari ikon dari cache internal; string atau ekspresi yang diinterpolasi juga dapat digunakan. Nama set tertentu dapat digunakan dengan sintaks <set name>: <icon name>. Untuk menggunakan kumpulan ikon, pengembang diharuskan untuk melakukan pra-registrasi kumpulan menggunakan layanan $ mdIconProvider.

5

aria-label

Ikon label ini untuk aksesibilitas. Jika string kosong diberikan, ikon akan disembunyikan dari lapisan aksesibilitas dengan aria-hidden = "true". Jika tidak ada aria-label pada ikon atau label pada elemen induk, peringatan akan dicatat ke konsol.

6

alt

Ikon label ini untuk aksesibilitas. Jika string kosong diberikan, ikon akan disembunyikan dari lapisan aksesibilitas dengan aria-hidden = "true". Jika tidak ada alt pada ikon atau label pada elemen induk, peringatan akan dicatat ke konsol.

Contoh

Contoh berikut menunjukkan penggunaan direktif md-icons dan juga penggunaan ikon.

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>

Hasil

Verifikasi hasilnya.