सवाल कोणीय सामग्री में का उपयोग कैसे करें?


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

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

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


101
2017-10-04 11:48


मूल




जवाब:


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

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

याद है 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 iconets के साथ अपने आवेदन को कॉन्फ़िगर करने के लिए सेवा।

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 सेवा दस्तावेज़ीकरण 


146
2017-10-05 20:04



लिगचर के बारे में त्वरित नोट: हाइफ़न के बजाय अंडरस्कोर का उपयोग करें। यह शायद आपके आगे के विवरण लिंक में कहीं भी दस्तावेज है लेकिन किसी को भी डेटा के लिए समय नहीं मिला है। ;-) - Olson.dev
उन्हें रंग देने का सही तरीका क्या है? - theblang
@mattblang यदि आप उन्हें फ़ॉन्ट आइकन के रूप में उपयोग करते हैं, तो यह सिर्फ एक फ़ॉन्ट है। तो सीएसएस में टेक्स्ट रंग सेट करना (जैसे {रंग: लाल}) उन्हें रंग देगा। - tanou
वास्तव में मुझे क्या चाहिए। मैं उपयोग करते समय शैली के साथ संघर्ष कर रहा था <i class='material-icons'>icon_name</i>, परंतु md-font-library पूरी तरह से मेरी समस्या हल हो गई। - Pieter VDE
एमडी-आइकन में एक चर का उपयोग क्यों नहीं करता है? <md-icon md-font-library = "material-icons"> {{user.type}} </ md-icon> .. इस मामले में user.type = "face" और टेक्स्ट के रूप में उपयोग करना यह < md-icon md-font-library = "सामग्री-चिह्न"> चेहरा </ md-icon> - mariomol


आज का सबसे आसान तरीका 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 aria-label="Menu" class="material-icons">menu</md-icon>

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


31
2017-11-01 13:14



यहां चरण 6 में भी: material.angular.io/guide/getting-started - Travis Reeder
बटन पर आइकन कैसे जोड़ें? - Alexander Mills


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

bower install material-design-icons --save

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


28
2017-12-15 02:45



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


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

bower install polymer/core-icons

6
2017-10-21 04:21





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

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


5
2017-09-15 09:32



यह खीझ दिलाने वाला है ng-md एमडी-आइकन जैसे आइकन बटन में आइकन को केंद्र में केंद्रित नहीं करता है। - MurWade
हाँ यहाँ एक ही समस्या है। ज्यादातर आपको सीएसएस के साथ पदों को परिशोधित करना होगा। position:relative; और उसके बाद svg तत्व या कंटेनर ले जाएँ by left-top-right-bottomबेहतर स्थिति में आप चाहते हैं। - Asqan
मुझे समझ में नहीं आता कि पथ कैसे काम करता है - Dejell


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

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

3
2017-11-01 01:10



बॉवर स्थापित सामग्री-डिजाइन-प्रतीक github.com/google/material-design-icons - neofreko
इसे डाउनलोड करें, बोअर का उपयोग न करें। यह 57 एमबी है - neofreko


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

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

<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


2
2017-10-20 11:53



ओपी AngularJS सामग्री का उपयोग कर रहा है। - Edric


<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


0
2017-11-22 03:33