จะใช้ <md-icon> ใน Angular Material ได้อย่างไร?

ฉันสงสัยว่าจะใช้ไอคอนของวัสดุได้อย่างไรเนื่องจากไม่ได้ผล:

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

ฉันเดาว่ามีปัญหากับเส้นทางที่กำหนดให้เป็นพารามิเตอร์ของแอตทริบิวต์ icon ฉันต้องการทราบว่าโฟลเดอร์ไอคอนนี้อยู่ที่ไหน?

เนื่องจากคำตอบอื่น ๆ ไม่ได้ตอบข้อกังวลของฉันฉันจึงตัดสินใจเขียนคำตอบของตัวเอง

เส้นทางที่กำหนดในแอตทริบิวต์ icon ของmd-iconคำสั่งคือ URL ของไฟล์. png หรือ. svg ที่อยู่ในไดเร็กทอรีไฟล์แบบคงที่ของคุณ ดังนั้นคุณต้องวางเส้นทางที่ถูกต้องของไฟล์นั้นในแอตทริบิวต์ icon ps ใส่ไฟล์ในไดเร็กทอรีที่ถูกต้องเพื่อให้เซิร์ฟเวอร์ของคุณสามารถให้บริการได้

จำไว้ว่าmd-iconไม่เหมือนไอคอน bootstrap ปัจจุบันเป็นเพียงคำสั่งที่แสดงไฟล์. svg

อัปเดต

การออกแบบวัสดุเชิงมุมมีการเปลี่ยนแปลงอย่างมากนับตั้งแต่มีการโพสต์คำถามนี้

ตอนนี้มีหลายวิธีในการใช้ md-icon

วิธีแรกคือใช้ไอคอน SVG

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

ตัวอย่าง:

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

หรือ

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

: getMyIconวิธีการที่กำหนดไว้ใน$scope.

หรือ <md-icon md-svg-icon="social:android"></md-icon>

ในการใช้สิ่งนี้คุณต้องใช้$mdIconProviderบริการเพื่อกำหนดค่าแอปพลิเคชันของคุณด้วยชุดไอคอน 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);    
  });

วิธีที่สองคือการใช้ไอคอนแบบอักษร

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

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

ก่อนที่จะทำสิ่งนี้คุณต้องโหลดไลบรารีแบบอักษรเช่นนี้ ..

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

หรือใช้ไอคอนแบบอักษรที่มีอักษรควบ

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

สำหรับรายละเอียดเพิ่มเติมตรวจสอบของเรา

เอกสารคำสั่งวัสดุเชิงมุม mdIcon

เอกสารบริการ $ mdIcon

$ mdIconProvider บริการเอกสาร

วิธีที่ง่ายที่สุดในวันนี้คือขอแบบอักษร Material Icons จาก Google Fonts ตัวอย่างเช่นในแท็กส่วนหัว HTML ของคุณ:

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

หรือในสไตล์ชีตของคุณ:

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

แล้วใช้เป็นไอคอนตัวอักษรด้วยหนังสติ๊กตามที่อธิบายไว้ในคำสั่ง MD-ไอคอน ตัวอย่างเช่น:

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

รายการไอคอน / สัญลักษณ์ทั้งหมดอยู่ที่https://www.google.com/design/icons/

ตอนนี้ใช้งานได้จริงจาก bower

bower install material-design-icons --save

ดาวน์โหลด 37.1 KB จากนั้นจะแยกและติดตั้ง คุณจะเห็นโฟลเดอร์ชื่อ material-design-icons ในโฟลเดอร์ bower_components ขนาดรวมประมาณ 299KBs

ไอคอน md ยังไม่ได้อยู่ในการปล่อยวัสดุเชิงมุม ฉันใช้ไอคอนของ Polymer อยู่แล้วพวกมันก็น่าจะเหมือนกันอยู่ดี

bower install polymer/core-icons

วิธีง่ายๆ: ใช้ CDN ต่อไปนี้:

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

ฉีด ngMdIcons ไปยังแอปพลิเคชัน angularjs ของคุณ:

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

ใช้คำสั่ง ng-md-icon ใน html ของคุณโดยระบุสีเติมผ่าน css:

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

ที่มา: https://klarsys.github.io/angular-material-icons/

ในรุ่นล่าสุดมีคำสั่งที่เรียกว่า md-icon

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

md-คำนำหน้าทั้งหมดเป็นmat-คำนำหน้าเมื่อเขียนสิ่งนี้!

ใส่สิ่งนี้ไว้ในหัว html ของคุณ:

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

นำเข้าในโมดูลของเรา:

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

ใช้ในรหัสของคุณ:

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

นี่คือเอกสารล่าสุด:

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>

แหล่งที่มา: https://material.angularjs.org/#/demo/material.components.button

โดยใช้ like
ใช้ css และ font ตำแหน่งเดียวกัน

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