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

102

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?

Adil Malik
sumber

Jawaban:

151

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

Adil Malik
sumber
1
Catatan singkat tentang ligatur: gunakan garis bawah, bukan tanda hubung. Ini mungkin didokumentasikan di suatu tempat di tautan detail lebih lanjut Anda tetapi tidak ada yang punya waktu untuk itu. ;-)
Olson.dev
Bagaimana cara yang tepat untuk mewarnainya?
theblang
@mattblang jika Anda menggunakannya sebagai ikon font, maka itu hanya font. Jadi pengaturan warna teks dalam css (seperti {color: red}) akan mewarnai mereka.
tanou
1
Persis yang saya butuhkan. Saya kesulitan dengan gaya saat menggunakan <i class='material-icons'>icon_name</i>, tetapi md-font-librarymenyelesaikan masalah saya dengan sempurna.
Pieter VDE
Mengapa menggunakan variabel di md-icon tidak berhasil? seperti <md-icon md-font-library = "material-icons"> {{user.type}} </md-icon> .. dalam hal ini user.type = "face" dan menggunakannya sebagai teks, ia berfungsi < md-icon md-font-library = "material-icons"> face </md-icon>
mariomol
31

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/

Jesús Carrera
sumber
bagaimana cara menambahkan ikon ke tombol?
Alexander Mills
28

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

rahul
sumber
20
Dan bagaimana cara menggunakannya?
Ernst Ernst
6

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

bower install polymer/core-icons
Ryan Metin
sumber
5

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/

Asqan
sumber
2
yang mengganggu ng-mdtidak memusatkan ikon di tombol ikon seperti md-icon.
Mustafa
ya sama masalah disini. kebanyakan Anda harus memperbaiki posisi dengan css. position:relative;lalu pindahkan elemen atau wadah svg by left-top-right-bottomke posisi yang lebih baik yang Anda inginkan.
Asqan
3

Dalam rilis terbaru mereka ada arahan yang disebut md-icon

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>
sgimeno.dll
sumber
4
pasang material-design-icons github.com/google/material-design-icons
neofreko
5
Unduh, jangan gunakan bower. Ini 57MB
neofreko
1

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

Joshua Michael Wagoner
sumber
OP menggunakan Material AngularJS.
Edric
0

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;
}
Kamlesh
sumber