Bagaimana cara menggunakan <md-icon> di Angular Material?

Saya bertanya-tanya bagaimana cara menggunakan ikon Material, karena ini tidak berfungsi:

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

Saya kira ada masalah dengan jalur yang diberikan sebagai parameter ke atribut ikon. Saya ingin tahu di mana sebenarnya folder ikon ini?

Karena jawaban lain tidak menjawab kekhawatiran saya, saya memutuskan untuk menulis jawaban saya sendiri.

Path yang diberikan dalam atribut icon md-icondirektif adalah URL dari file .png atau .svg yang ada di suatu tempat di direktori file statis Anda. Jadi, Anda harus meletakkan jalur yang benar dari file itu di atribut ikon. ps letakkan file di direktori yang benar sehingga server Anda dapat menyajikannya.

Ingat md-icontidak seperti ikon bootstrap. Saat ini mereka hanyalah sebuah arahan yang menunjukkan file .svg.

Memperbarui

Desain material sudut telah banyak berubah sejak pertanyaan ini diposting.

Sekarang ada beberapa cara untuk menggunakannya md-icon

Cara pertama adalah menggunakan ikon SVG.

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

Contoh:

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

atau

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

: dimana getMyIconmetode didefinisikan dalam $scope.

atau <md-icon md-svg-icon="social:android"></md-icon>

untuk menggunakan ini, Anda harus ke $mdIconProviderlayanan untuk mengkonfigurasi aplikasi Anda dengan kumpulan ikon svg.

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);    
  });

Cara kedua adalah dengan menggunakan ikon font.

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

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

sebelum melakukan ini, Anda harus memuat pustaka font seperti ini ..

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

atau gunakan ikon font dengan ligatur

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

Untuk detail lebih lanjut, periksa kami

Dokumentasi Angular Material mdIcon Directive

$ mdIcon Service Documentation

$ mdIconProvider Service Documentation

Cara termudah hari ini adalah dengan meminta font Material Icons dari Google Fonts, misalnya di tag header HTML Anda:

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

atau di stylesheet Anda:

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

dan kemudian gunakan sebagai ikon font dengan ligatur seperti yang dijelaskan dalam direktif md-icon . Sebagai contoh:

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

Daftar lengkap ikon / ligatur ada di https://www.google.com/design/icons/

Ini benar-benar berfungsi sekarang dari bower.

bower install material-design-icons --save

Ini mengunduh 37,1 KB. Kemudian ia mengekstrak dan menginstal. Anda akan melihat folder bernama material-design-icons di folder bower_components. Ukuran totalnya sekitar 299 KB

md-icons belum merilis material bersudut. Saya telah menggunakan ikon Polymer , mereka mungkin akan sama.

bower install polymer/core-icons

Cara mudah: gunakan CDN berikut:

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

Masukkan ngMdIcons ke aplikasi angularjs Anda:

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

Gunakan perintah ng-md-icon di html Anda, tentukan warna isian melalui css:

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

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

Dalam rilis terbaru mereka ada arahan yang disebut md-icon

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

Semua md-prefiks sekarangmat- prefiks pada saat penulisan ini!

Taruh ini di kepala html Anda:

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

Impor dalam modul kami:

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

Gunakan dalam kode Anda:

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

Berikut dokumentasi terbarunya:

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

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

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

Dengan menggunakan like
gunakan css dan font lokasi yang sama

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