Làm thế nào để sử dụng <md-icon> trong Angular Material?

Tôi đã tự hỏi làm thế nào để sử dụng các biểu tượng của Material, vì nó không hoạt động:

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

Tôi đoán có vấn đề với đường dẫn được cung cấp dưới dạng tham số cho thuộc tính biểu tượng. Tôi muốn biết thư mục biểu tượng này thực sự ở đâu?

Vì các câu trả lời khác không giải quyết được mối quan tâm của tôi, tôi quyết định viết câu trả lời của riêng mình.

Đường dẫn được cung cấp trong thuộc tính biểu tượng của md-iconchỉ thị là URL của tệp .png hoặc .svg nằm ở đâu đó trong thư mục tệp tĩnh của bạn. Vì vậy, bạn phải đặt đúng đường dẫn của tệp đó trong thuộc tính biểu tượng. ps đặt tệp vào đúng thư mục để máy chủ của bạn có thể phục vụ nó.

Hãy nhớ md-iconkhông giống như các biểu tượng bootstrap. Hiện tại, chúng chỉ là một chỉ thị hiển thị tệp .svg.

Cập nhật

Thiết kế vật liệu góc đã thay đổi rất nhiều kể từ khi câu hỏi này được đăng.

Bây giờ có một số cách để sử dụng md-icon

Cách đầu tiên là sử dụng các biểu tượng SVG.

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

Thí dụ:

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

hoặc là

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

: getMyIconphương thức được định nghĩa ở đâu $scope.

hoặc là <md-icon md-svg-icon="social:android"></md-icon>

để sử dụng điều này, bạn phải sử dụng $mdIconProviderdịch vụ để định cấu hình ứng dụng của mình với các bộ biểu tượng 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);    
  });

Cách thứ hai là sử dụng các biểu tượng phông chữ.

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

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

trước khi làm điều này, bạn phải tải thư viện phông chữ như thế này ..

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

hoặc sử dụng các biểu tượng phông chữ với các chữ ghép

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

Để biết thêm chi tiết, hãy kiểm tra

Tài liệu hướng dẫn về Angular Material mdIcon

Tài liệu Dịch vụ $ mdIcon

Tài liệu dịch vụ $ mdIconProvider

Cách đơn giản nhất hiện nay là yêu cầu phông chữ Material Icons từ Google Fonts, ví dụ như trong thẻ tiêu đề HTML của bạn:

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

hoặc trong biểu định kiểu của bạn:

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

và sau đó sử dụng làm biểu tượng phông chữ với chữ ghép như được giải thích trong chỉ thị md-icon . Ví dụ:

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

Danh sách đầy đủ các biểu tượng / chữ ghép có tại https://www.google.com/design/icons/

Nó thực sự hoạt động bây giờ từ bower.

bower install material-design-icons --save

Nó tải xuống 37,1 KBs. Sau đó, nó giải nén và cài đặt. Bạn sẽ thấy một thư mục có tên material-design-icon trong thư mục bower_components. Tổng kích thước khoảng 299KBs

md-icon vẫn chưa có trong bản phát hành mạnh mẽ của angle-material. Tôi đã sử dụng các biểu tượng của Polymer , chúng có thể sẽ giống nhau.

bower install polymer/core-icons

Cách dễ dàng: sử dụng CDN sau:

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

Chèn ngMdIcons vào ứng dụng anglejs của bạn:

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

Sử dụng lệnh ng-md-icon trong html của bạn, chỉ định màu tô thông qua css:

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

Nguồn: https://klarsys.github.io/angular-material-icons/

Trong bản phát hành mới nhất của họ, có một chỉ thị được gọi là md-icon

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

Tất cả các md-tiền tố bây giờ là mat-tiền tố tại thời điểm viết bài này!

Đặt cái này vào phần đầu html của bạn:

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

Nhập vào mô-đun của chúng tôi:

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

Sử dụng trong mã của bạn:

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

Đây là tài liệu mới nhất:

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>

nguồn: https://material.angularjs.org/#/demo/material.components.button

Bằng cách sử dụng như
sử dụng css và phông chữ cùng một vị trí

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