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




material-design angularjs-material (8)

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

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

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


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

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


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

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


आसान तरीका: निम्नलिखित सीडीएन का उपयोग करें:

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

अपने angularjs आवेदन के लिए ngMdIcons इंजेक्षन:

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

अपने एचटीएमएल में एनजी-एमडी-आइकन निर्देश का प्रयोग करें, सीएसएस के माध्यम से भरने के रंग को निर्दिष्ट करें:

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

स्रोत: https://klarsys.github.io/angular-material-icons/


आज का सबसे आसान तरीका 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




angularjs-material