angularjs - कोणीय सामग्री में<md-icon> का उपयोग कैसे करें?




material-design angularjs-material (6)

अपनी नवीनतम रिलीज में md-icon नामक एक निर्देश है

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

मैं सोच रहा था कि सामग्री के आइकन का उपयोग कैसे करें, क्योंकि यह काम नहीं कर रहा है:

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

मुझे लगता है कि आइकन विशेषता के पैरामीटर के रूप में दिए गए पथ के साथ कोई समस्या है। मैं जानना चाहता हूं कि यह आइकन फ़ोल्डर वास्तव में कहां है?


आज का सबसे आसान तरीका Google फ़ॉन्ट्स से सामग्री आइकन फ़ॉन्ट का अनुरोध करना होगा, उदाहरण के लिए अपने HTML हेडर टैग में:

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

या अपनी स्टाइलशीट में:

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

और फिर md-icon निर्देश में बताए गए अनुसार ligatures के साथ फ़ॉन्ट आइकन के रूप में उपयोग करें। उदाहरण के लिए:

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

आइकन / लिगरेचर की पूरी सूची https://www.google.com/design/icons/


इस तरह का उपयोग करके
सीएसएस और फ़ॉन्ट का उपयोग उसी स्थान पर करें

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

एमडी-आइकॉन अभी तक कोणीय-सामग्री की बोवर रिलीज में नहीं हैं। मैं पॉलिमर के आइकनों का उपयोग कर रहा हूं, वे शायद वही होंगे।

bower install polymer/core-icons

यह वास्तव में अब बोअर से काम करता है।

bower install material-design-icons --save

यह 37.1 केबी डाउनलोड करता है। फिर यह निष्कर्ष निकाला और स्थापित करता है। आपको bower_components फ़ोल्डर में सामग्री-डिज़ाइन-आइकॉन नामक एक फ़ोल्डर दिखाई देगा। कुल आकार लगभग 29 9 केबी है


सभी md- उपसर्ग अब लिखने के समय के रूप में md- prefixes हैं!

इसे अपने एचटीएमएल हेड में रखें:

<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





angularjs-material