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

Question

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

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

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

Answer 1

जैसा कि अन्य उत्तरों ने मेरी चिंता को संबोधित नहीं किया था, मैंने अपना जवाब लिखने का फैसला किया।

md-iconनिर्देश की आइकन विशेषता में दिया गया पथ आपकी स्थिर फ़ाइल निर्देशिका में कहीं .png या .svg फ़ाइल का URL है। तो आपको उस फ़ाइल का सही पथ आइकन विशेषता में रखना होगा। ps ने फ़ाइल को सही निर्देशिका में रखा ताकि आपका सर्वर इसे सेवा दे सके।

याद रखें md-iconबूटस्ट्रैप आइकन की तरह नहीं है। वर्तमान में वे केवल एक निर्देश हैं जो एक .svg फ़ाइल दिखाता है।

अपडेट करें

यह प्रश्न पोस्ट किए जाने के बाद से कोणीय सामग्री का डिज़ाइन बहुत बदल गया है।

अब उपयोग करने के कई तरीके हैं md-icon

पहला तरीका एसवीजी आइकन का उपयोग करना है।

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

या ligatures के साथ फ़ॉन्ट आइकन का उपयोग करें

<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 सेवा प्रलेखन

Comments

लिगुरेट्स के बारे में त्वरित ध्यान दें: हाइफ़न के बजाय अंडरस्कोर का उपयोग करें। यह शायद आपके आगे के विवरण लिंक में कहीं प्रलेखित है, लेकिन किसी को डेट के लिए समय नहीं मिला है। ;-)

— ओलसन।देव

उन्हें रंग देने का उचित तरीका क्या है?

— दिबांग

@mattblang यदि आप उन्हें फ़ॉन्ट आइकन के रूप में उपयोग कर रहे हैं, तो यह सिर्फ एक फ़ॉन्ट है। इसलिए टेक्स्ट कलर को css में सेट करें (जैसे {color: red}) उन्हें कलर करेंगे।

— tanou

वास्तव में मुझे जो चाहिए था। मैं उपयोग करते समय शैली के साथ संघर्ष कर रहा था <i class='material-icons'>icon_name</i>, लेकिन md-font-libraryमेरे मुद्दे को पूरी तरह से हल किया।

— पीटर VDE

Md-icon में एक वैरिएबल का उपयोग करना क्यों काम नहीं करता है? जैसे <md-icon md-font-Library = "material-icons"> {{user.type}} </ md-icon> .. इस मामले में user.type = "face" और पाठ के रूप में उपयोग करने से यह काम करता है < md-icon md-font-

— Library

Answer 2

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

<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/ पर है

Comments

बटन में आइकन कैसे जोड़ें?

— अलेक्जेंडर मिल्स

Answer 3

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

bower install material-design-icons --save

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

Comments

और फिर इसका उपयोग कैसे करें?

— अर्न्स्ट अर्नस्ट

Answer 4

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

bower install polymer/core-icons

Answer 5

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

<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']);

अपने html में ng-md-icon निर्देश का उपयोग करें, css के माध्यम से फिल-रंग निर्दिष्ट करें:

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

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

Comments

इसका कष्टप्रद ng-mdआइकन आइकन में आइकन को केंद्र में रखता है जैसे md-icon करता है।

— मुस्तफा

हाँ यहाँ भी यही समस्या है। ज्यादातर आपको सीएसएस के साथ पदों को परिष्कृत करना होगा। position:relative;और फिर svg तत्व या कंटेनर by left-top-right-bottomको उस बेहतर स्थिति में ले जाएँ जहाँ आप चाहते हैं।

— असकन

Answer 6

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

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

Comments

bower इंस्टॉल करें सामग्री-डिज़ाइन-आइकन github.com/google/material-design-icons

— neofreko

इसे डाउनलोड करें, बोवर का उपयोग न करें। यह

— 57MB है

Answer 7

यह लिखते समय सभी 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

Comments

ओपी AngularJS Material का उपयोग कर रहा है।

— एडिक

Answer 8

<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.compords.button

Answer 9

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

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