मटेरियल आइकन को ऑफलाइन होस्ट कैसे करें?

106

यदि यह एक बहुत ही सरल प्रश्न है, तो मेरी क्षमा याचना, लेकिन आप Google सामग्री आइकन का उपयोग कैसे करते हैं

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

?

मैं चाहूंगा कि मेरा ऐप आइकन तब भी प्रदर्शित हो जब उपयोगकर्ता के पास इंटरनेट कनेक्शन न हो

— ल्यूक टैन
स्रोत

यह लेख एंगुलर के

— गगन

112

विधि 2. स्व होस्टिंग डेवलपर गाइड

गितुब (संपत्तियां: ज़िप फ़ाइल) से नवीनतम रिलीज़ को डाउनलोड करें, और अपने स्थानीय प्रोजेक्ट में सामग्री डिज़ाइन आइकन फ़ाइलों से युक्त आइकनफ़ॉन्ट फ़ोल्डर की प्रतिलिपि बनाएं - https://github.com/google/material-design-icons/ विज्ञप्ति

आपको केवल संग्रह से आइकनफॉन्ट फ़ोल्डर का उपयोग करने की आवश्यकता है : इसमें विभिन्न प्रारूपों (कई ब्राउज़र समर्थन के लिए) और बॉयलरप्लेट सीएसएस में आइकन फ़ॉन्ट शामिल हैं।

स्रोत को अपने स्थानीय प्रोजेक्ट में iconfont फ़ोल्डर के सापेक्ष पथ के साथ @ फ़ॉन्ट-फेस की url विशेषता में बदलें, (जहाँ फ़ॉन्ट फ़ाइलें स्थित हैं) उदा। url ("iconfont / MaterialIcons-Regular.ttf")

@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

<i class="material-icons">face</i>

एनपीएम / बोवर पैकेज

Google के पास आधिकारिक रूप से एक Bower और NPM निर्भरता विकल्प है - सामग्री प्रतीक गाइड 1 का पालन करें

बोवर का उपयोग करना :bower install material-design-icons --save

एनपीएम का उपयोग करना :npm install material-design-icons --save

मटेरियल आइकॉन : वैकल्पिक रूप से आइकनों की मेज़बानी के लिए मटेरियल की https://marella.me/material-icons/ से आइकॉन डिज़ाइनिंग आइकन फॉन्ट और सीएसएस फ्रेमवर्क देखें।

ध्यान दें

ऐसा लगता है कि Google के पास कम रखरखाव मोड पर परियोजना है। अंतिम रिलीज, लेखन के समय, 3 साल पहले थी!

इस बारे में GitHub पर कई मुद्दे हैं, लेकिन मैं इस मुद्दे पर @cyberalien टिप्पणी का संदर्भ देना चाहूंगा Is this project actively maintained? #951जहां यह कई सामुदायिक परियोजनाओं को संदर्भित करता है जो कांटेक्ट करते हैं और सामग्री आइकन बनाए रखना जारी रखते हैं।

— bfmags
स्रोत

आप ऐसा फ़ोन GAP ऐप के लिए कैसे करेंगे जहां आपके पास डोमेन नहीं होगा?

— ल्यूक टैन

अपने स्थानीय फ़ोल्डर को @ font-face: url ("iconfont / MaterialIcons-Regular.woff2" के स्रोत url में लक्षित करें - अपडेट किया गया उत्तर

— bfmags

अरे, क्या आप कृपया इसका अद्यतन उत्तर दे सकते हैं। मैंने npm के साथ अपने mdl आइकन डाउनलोड किए हैं।

— TheBAST

1

मेरी समस्या का हल ... मैं सिर्फ यह जानना चाहता था कि हमें iconfontपूरे संग्रह से केवल फ़ोल्डर की आवश्यकता है ।

— securecurve

इस प्रकार के "स्थानीय रूप से चलाए जाने के लिए सीडीएन संसाधन को स्थानांतरित करें" के लिए आमतौर पर 3000 से अधिक अनुरोधों का औसत प्रतिक्रिया समय के डेटा से पहले एक ठोस भुगतान करना होगा और परिवर्तन के बाद - आपको आश्चर्य होगा कि यह कितनी बार लायक है, इसकी परवाह किए बिना। इसे प्राप्त करने का आपका प्रयास ...

— योर्डन जॉर्जिएव

37

मैं Angular 4/5 के लिए निर्माण कर रहा हूं और अक्सर ऑफ़लाइन काम कर रहा हूं और इसलिए निम्नलिखित ने मेरे लिए काम किया है। पहले एनपीएम स्थापित करें:

npm install material-design-icons --save

उसके बाद स्टाइल के लिए निम्नांकित जोड़ें।

@import '~material-design-icons/iconfont/material-icons.css';

— रिचर्ड बोउन
स्रोत

10

जब कॉल "एनपीएम इंस्टॉल" वेट वेट वेट लोल ... लेकिन लंबे समय के बाद काम करता है

— सर्जियो कैब्रल

2

@SergioCabral सौभाग्य से आपने प्रतीक्षा के बारे में टिप्पणी की है, क्योंकि वहाँ लगभग 5 बार मैंने सोचा था कि यह स्थापित कहीं नहीं हो रहा है ... :)

— अल्फा ब्रावो

1

थैंक यू लव्ड इट इट इज बेस्ट सोल्यूशन थैंक यू <3

— अली जमाल

मेरे लिए भी काम करना ... :)

— औपर

3

किसी भी विचार कैसे उल्लिखित प्रतीक जोड़ने के लिए?

— वुत्जेबेर

20

ऊपरी दृष्टिकोण मेरे लिए काम नहीं करता है। मैं गितुब से फाइलें डाउनलोड करता हूं, लेकिन ब्राउज़र ने फोंट लोड नहीं किया।

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

https://fonts.googleapis.com/icon?family=Material+Icons

और मैंने यह मार्कअप देखा:

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

मैं woff फ़ॉन्ट url लिंक खोलता हूं https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FddJ140U2DJYC3mY.woff2

और woff2 फ़ाइल डाउनलोड करें।

फिर मैं woff2 फ़ाइल पथ को सामग्री-icons.css में नए के साथ प्रतिस्थापित करता हूं

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

यह मेरे लिए काम करता है।

— कालोयान स्टामाटोव
स्रोत

धन्यवाद! मेरे पास एक ही मुद्दा था और इसने मेरे लिए इसे ठीक कर दिया।

— डेविड

मैं इस मुद्दे के साथ अपने मुद्दे को हल करता हूं, लेकिन बाद में मुझे एक और git रेपो मिला, जहां से मुझे उचित रिलीज मिली।

— कालोयान स्टामाटोव

@ Kaloyan Stamatov उस git रेपो को साझा करना अच्छा होगा .. क्योंकि बहुत से लोगों के पास पुराने आधिकारिक रेपो के साथ मुद्दा है :)

— ग्राशपॉपर

@Grashopper, मेरे पास अब यह नहीं है। क्षमा करें

— कालोयान स्टामाटोव

1

2019 की तारीख तक, इस समाधान ने मेरे लिए भी काम किया।

— कॉम्पिट

17

यदि आप वेबपैक प्रोजेक्ट का उपयोग करते हैं, के बाद

npm install material-design-icons --save

आपको बस जरूरत है

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

— व्लादिस्लाव कोसोवोख
स्रोत

7

मैं यह करने की सलाह नहीं देता, यह रेपो बहुत बड़ा है, एक desc का उपयोग करें। नीचे npmjs.com/package/material-design-icons-iconfont मैंने यह भी देखा कि ब्राउज़र फोंस को कैश करेगा। googleapis.com/icon?family=Material+Icons और यह ऑफ़लाइन मोड में काम करेगा। चेकआउट keemor.github.io/#

— keemor

मैं npm में नौसिखिया हूँ आप विस्तृत कर सकते हैं import materialIcons from 'material-design-icons/iconfont/material-icons.css'। हम इस लाइन को कहाँ तक जोड़ रहे हैं? app.js या कहीं और। मैं Vue के साथ फ्रेमवर्क 7 का उपयोग कर रहा हूं और मैंने कोशिश की। यह मेरे लिए काम नहीं किया।

— सुत अतान पीएचडी

@SuatAtanPhD आप इस आयात को किसी अन्य शैली के आयात की तरह जोड़ते हैं। यदि आप वेबपैक का उपयोग करते हैं, तो आपको स्टाइल-लोडर, सीएसएस-लोडर जैसी किसी चीज़ की आवश्यकता होती है और आप इस आयात को अपने जेएस कोड में कहीं भी रख सकते हैं, उदाहरण के लिए index.js या app.js आदि में

— व्लादिस्लाव कोसोवोख

1

इंटरनेट के उपयोग के बिना आंतरिक नेटवर्क में काम करने वाले कॉरपोरेट वेब एप्लिकेशन के निर्माण के लिए इस तरह के दृष्टिकोण की सिफारिश की जाती है

— यूरी ब्रैचुक

13

यह एक आसान समाधान हो सकता है

इस रिपॉजिटरी को प्राप्त करें जो मूल रिपॉजिटरी का एक कांटा है प्रकाशित Google ।

इसे बोवर या एनपीएम के साथ स्थापित करें

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

अपने HTML पृष्ठ पर css फ़ाइल आयात करें

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

या

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

टेस्ट: अपनी HTML फ़ाइल के बॉडी टैग के अंदर एक आइकन जोड़ें

<i class="material-icons">face</i>

यदि आप चेहरा आइकन देखते हैं, तो आप ठीक हैं।

यदि काम नहीं करता है, तो ..इसे node_modulesपथ के लिए उपसर्ग के रूप में जोड़ने का प्रयास करें :

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

— मो। हारुन या राशिद
स्रोत

रोजगार सामग्री डिजाइन-माउस-iconfont पैकेज भी कोणीय के मानक के साथ काम करता mat-iconघटक। इस प्रकार संक्रमण निर्बाध है।

— यूरी

यह वह समाधान है जो मेरे लिए काम करता है, index.html में स्टाइलशीट लिंक को छोड़कर, काम नहीं किया - मुझे अपनी Styles.scss फ़ाइल में एक आयात जोड़ना पड़ा: @import"../node_modules/material-design-icons-iconfont/dist/material-design-icons.css"; तब मेरे स्थानीय रूप से होस्ट किए गए आइकन जीवन में उछले

— Ade

7

मेरी रेसिपी के तीन चरण हैं:

सामग्री-डिजाइन-आइकन पैकेज स्थापित करने के लिए
```
npm install material-design-icons
```
आयात करने के लिए सामग्री-icons.css फ़ाइल को .less या .scss फ़ाइल / प्रोजेक्ट में
```
@import "~/node_modules/material-design-icons/iconfont/material-icons.css";
```
Reajjs .js फ़ाइल / प्रोजेक्ट में अनुशंसित कोड शामिल करने के लिए
```
<i className='material-icons' style={{fontSize: '36px'}}>close</i>
```

— रोमन
स्रोत

इस पैकेज में कोई और मौजूद नहीं है

— योहानतन याहज़केल

कोणीय क्ली के साथ, npm सामग्री-डिज़ाइन-चिह्न स्थापित करते हैं और फिर कोणीय में जोड़ते हैं ।json -> वास्तुकार->

— निर्माण-

6

सामग्री-डिजाइन-आइकन-आइकॉनफ़ॉन्ट का उपयोग करें

पूर्ण प्रकटीकरण, मैं इस पैकेज का लेखक हूं

Google की सामग्री-डिज़ाइन-आइकन परियोजना कम रखरखाव और कुछ समय के लिए पुरानी है । Https://material.io/icons/ में संस्करण और सामग्री-डिज़ाइन-आइकन में संस्करण के बीच एक अंतर है ।

मैंने इन प्रमुख मुद्दों को हल करने के लिए सामग्री-डिज़ाइन-आइकन-आइकन-आइकन बनाया है :

सामग्री-डिजाइन-आइकन जामnpm install - सभी अप्रासंगिक svg / xml / ... फाइलें हटा दी गई हैं
फ़ॉन्ट फ़ाइलें हमेशा अप-टू-डेट सीधे होती हैं Google Fonts CDN से होती हैं
एससीएस के लिए समर्थन

के माध्यम से स्थापित करें `npm`

npm install material-design-icons-iconfont --save

यह इस बात पर निर्भर करता है कि आप अपने वेब एप्लिकेशन को कैसे पैक करते हैं ( webpack/ gulp/ bower/ ...), आपको .css/ .scssफ़ाइल आयात करने की आवश्यकता होगी (और संबंधित फ़ॉन्ट्स को बदल सकते हैं)

SCSS का उपयोग कर आयात करें

अपनी एक sass फाइलों में आयात करें

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

बाद में, अपने इच्छित आइकन <i class="material-icons">+ आइकन-आईडी + का संदर्भ लें</i>

<i class="material-icons">contact_support</i>

अधिक आयात विधियों के लिए सामग्री-डिज़ाइन-आइकन-आइकॉनफ़ॉन्ट पर पूर्ण निर्देश पढ़ें

डेमो पेज

यह खोज और कॉपी-पेस्ट करने वाले फोंट की सहायता के लिए एक लाइट डेमो पेज के साथ आता है

— जोसेफ हर्ष
स्रोत

1

मुझे PWA से समस्या है। जब आप ब्राउज़र में होते हैं तो आइकन काम कर रहे होते हैं लेकिन एक बार जब आप होम स्क्रीन पर शॉर्टकट जोड़ते हैं और चलाते हैं तो ऐप आइकन दिखाई नहीं दे रहे हैं।

— व्लादा

4

मैंने अपने उत्तर में उन सभी चीजों को संकलित करने की कोशिश की है जो स्वयं-होस्टिंग आइकन के लिए किए जाने की आवश्यकता है। आपको इन 4 सरल चरणों का पालन करने की आवश्यकता है।

मटेरियलिज़ रिपॉजिटरी का आइकनफॉन्ट फ़ोल्डर खोलें

लिंक- https://github.com/google/material-design-icons/tree/master/iconfont
इन तीन आइकन फ़ाइलों को डाउनलोड करें ->

MaterialIcons-Regular.woff2 - प्रारूप ('woff2')

MaterialIcons-Regular.woff - प्रारूप ('woff')

मटीरियलकॉन-रेगुलर.टीटीएफ - प्रारूप (' ट्रेटाइप ');

नोट- डाउनलोड करने के बाद आप जो चाहें उसे इसका नाम बदल सकते हैं।
अब, अपने CSS पर जाएं और इस कोड को जोड़ें

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

स्निपेट का विस्तार करें

नोट: src में दिया गया पता: url (...) 'सीएसएस फ़ाइल' के संबंध में होना चाहिए न कि index.html फ़ाइल के साथ। उदाहरण के लिए यह src: url (../ myicons / MaterialIcons-Regular.woff2) हो सकता है

आप अभी उपयोग करने के लिए तैयार हैं और यहाँ बताया गया है कि यह HTML में कैसे किया जा सकता है

<i class="material-icons">face</i>

स्निपेट का विस्तार करें

उपयोग किए जा सकने वाले सभी आइकन देखने के लिए यहां क्लिक करें ।

— abhinav1602
स्रोत

आपके लिंक पर 404

— वीलींगटन दाल प्रा

1

@ WelyngtonDalPrá धन्यवाद। सुधारा

— abhinav1602

3

आपके द्वारा किए जाने के बाद npm install material-design-icons, इसे अपनी मुख्य CSS फ़ाइल में जोड़ें:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

— मनोलो अल्वारेज़
स्रोत

3

कोणीय क्ली के साथ

npm install angular-material-icons --save

या

npm install material-design-icons-iconfont --save

सामग्री-डिजाइन-प्रतीक-iconfont माउस का नवीनतम अद्यतन संस्करण है। कोणीय-सामग्री-चिह्न लंबे समय तक अपडेट नहीं किए जाते हैं

प्रतीक्षा करें प्रतीक्षा करें स्थापित होने के लिए प्रतीक्षा करें और फिर इसे angular.json -> परियोजनाओं -> वास्तुकार -> शैलियों में जोड़ें

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

या यदि आपने सामग्री-desing-icons-iconfont स्थापित किया है तो

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

— Wlada
स्रोत

3

2019 यहां अपडेट करें:

अपने मटेरियल आइकन को होस्ट करने के लिए, रेगुलर वाले, राउंडेड, शार्प, सभी वेरिएंट। इस रेपो से उन्हें प्राप्त करें: https://github.com/petergng/material-icon-font

किसी कारण से मुझे नहीं पता कि ये फ़ॉन्ट Google रिपॉजिटरी से आसानी से उपलब्ध क्यों नहीं हैं।

लेकिन यहाँ तुम जाओ।

पैकेज डाउनलोड करने के बाद, बिन फ़ोल्डर पर जाएं और आपको चार वेरिएंट दिखाई देंगे। बेशक, यह आप पर निर्भर है कि आप किसका उपयोग करेंगे।

उनका उपयोग करने के लिए, एक css फ़ाइल बनाएं और

प्रत्येक संस्करण की आवश्यकता के लिए एक फ़ॉन्ट चेहरा बनाएं:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
    src: local('Material-Icons-Regular'),
    url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
    url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
    url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
    src: local('Material-Icons-Round'),
    url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
    url(./icons/round/Material-Icons-Round.woff) format('woff'),
    url(./icons/round/Material-Icons-Round.svg) format('svg'),
    url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
    src: local('Material-Icons-Sharp'),
    url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
    url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
    url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
    url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}

urlजहां माउस अपनी परियोजना में स्थित हैं से लिंक करेगा।

अब आइकॉन क्लासेस को रजिस्टर करने देता है:

.material-icons-outlined, .material-icons {
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

यह दोनों .material-icons-outlined, और .material-iconsवर्गों को एक ही चूक का उपयोग करेगा। यदि आप उपयोग करना चाहते हैं .material-icons-sharp, तो बस इसे दो श्रेणी के नामों के साथ जोड़ दें।

अंत में, चरण -1 में आपके द्वारा खींचे गए फ़ॉन्ट चेहरे को प्लग-इन करें।

.material-icons {
    font-family: 'Material Icons';
}

.material-icons-outlined {
    font-family: 'Material Icons Outline';
}

फिर से, अधिक वैरिएंट का उपयोग करने के लिए, जैसे तीव्र, बस इसके ब्लॉक को ऊपर के दो की तरह जोड़ दें।

एक बार हो जाने के बाद ... अपने html पर जाएँ और अपने नए बनाए गए आइकनों का उपयोग करें।

<i class="material-icons-outlined">hourglass_empty</i>

<i class="material-icons">phone</i>

— wale
स्रोत

2

पर http://materialize.com/icons.html पृष्ठ में शामिल शैली शीर्षक जानकारी, आप वास्तविक हाइपरलिंक पर जा सकते हैं और माउस को ऑफ़लाइन उपयोग करने के लिए स्थानीयकृत प्रतियां बना सकते हैं।

यहाँ बताया गया है। NB: आप सभी icon.css और somefile.woff में दो फ़ाइलें डाउनलोड करेंगे ।

हेडर में आवश्यकतानुसार निम्न URL पर जाएं

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

पृष्ठ को जो कुछ भी है उसे सेव करें। डिफ़ॉल्ट icon.css है

इस तरह एक लाइन के लिए देखो

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

उस URL पर जाएँ, जिसने इसे समाप्त किया है

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2। आपका ब्राउज़र अपने आप इसे डाउनलोड कर लेगा। इसे अपने CSS फोल्डर में सेव करें।

अब आपके पास दो फाइल icon.css और 2fcrYFNa .... mY.wof22 होना चाहिए , इन दोनों को अपनी सीएसएस में सहेजें। अब अपने सीएसएस हेडर स्थान में अपनी निर्देशिकाओं में icon.css पर संपादन करें। बस सुनिश्चित करें कि .woff2 फ़ाइल हमेशा icon.css के समान फ़ोल्डर में होती है। लंबी फ़ाइल नामों को संपादित करने के लिए स्वतंत्र महसूस करें।

— जोसेफ काये
स्रोत

2

प्रश्न शीर्षक पूछता है कि कैसे मटेरियल आइकन को ऑफलाइन होस्ट किया जाए, लेकिन बॉडी स्पष्ट करती है कि उद्देश्य मटेरियल आइकन्स का ऑफलाइन उपयोग करना है (जोर मेरा) ।

सामग्री आइकन फ़ाइलों की अपनी प्रति का उपयोग करना एक मान्य दृष्टिकोण / कार्यान्वयन है। एक और, उन लोगों के लिए जो सेवा कार्यकर्ता का उपयोग कर सकते हैं , सेवा कार्यकर्ता का ध्यान रखना है। इस तरह आपको कॉपी प्राप्त करने और उसे अद्यतित रखने का झंझट नहीं है।

उदाहरण के लिए, वर्कबॉक्स का उपयोग करते हुए वर्कबॉक्स-क्ली को चलाने और चूक को स्वीकार करने के लिए सबसे सरल दृष्टिकोण का उपयोग करके, सेवा बॉक्स का उपयोग करें, फिर उत्पन्न सेवा कार्यकर्ता को निम्न पाठ जोड़ें:

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

तब आप जांच सकते हैं कि इसे F12> Application> Storage> IndexedDB का उपयोग करके क्रोम में कैश किया गया था और नाम में googleapis के साथ एक प्रविष्टि की तलाश थी।

— जोसेफ सिम्पसन
स्रोत

मुझे यह कुछ छोटे बदलावों के साथ काम करने के लिए मिला। मैंने "वर्कबॉक्सएसडब्ल्यू" को "वर्कबॉक्स" में बदल दिया। मैंने "राउटर" को "रूटिंग" में बदल दिया और इस कोड को अपने sw_config.js फ़ाइल में जोड़ा, जो वर्कबॉक्स cli विज़ार्ड का उपयोग करते समय उत्पन्न होता है।

— जेसन अलशोर्न

2

2020 तक, मेरा दृष्टिकोण सामग्री-आइकन-फ़ॉन्ट पैकेज का उपयोग करना है। यह Google के सामग्री-डिज़ाइन-आइकन पैकेज और समुदाय आधारित सामग्री-डिज़ाइन-आइकन-आइकॉनफ़ॉन्ट के उपयोग को सरल करता है ।

पैकेज स्थापित करें। npm install material-icons-font --save
पैकेज की सीएसएस फ़ाइल का पथ अपनी परियोजना की कोणीय.जॉन फ़ाइल की शैली गुण में जोड़ें।

... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...
यदि SCSS का उपयोग कर रहे हैं, तो नीचे दी गई सामग्री को अपनी शैलियों के शीर्ष पर कॉपी करें। फाइल।

@import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

अपनी परियोजना की HTML फ़ाइल में आइकन का उपयोग करें।

// Using icon tag
<i class="material-icons">face</i>
<i class="material-icons md-48">face</i>
<i class="material-icons md-light md-inactive">face</i>

// Using Angular Material's <mat-icon> tag
<mat-icon>face</mat-icon>
<mat-icon>add_circle</mat-icon>
<mat-icon>add_circle_outline</mat-icon>

ऑफ़लाइन होने पर @ कोणीय / सामग्री से चिह्न टूटते हैं। @ कोणीय / सामग्री के साथ संयोजन में सामग्री-आइकन-फ़ॉन्ट पैकेज जोड़ना आपको ऑफ़लाइन विकसित करते समय टैग का उपयोग करने की अनुमति देता है।

— HelloWorldPeace
स्रोत

0

Npm पैकेज स्थापित करें

npm install material-design-icons --save

Css फ़ाइल पथ को style.css फ़ाइल में रखें

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

— अहमत अरसलन
स्रोत

0

Kaloyan Stamatov विधि सबसे अच्छी है। सबसे पहले https://fonts.googleapis.com/icon?family=Material+Icons पर जाएं । और css फ़ाइल को कॉपी करें। सामग्री इस तरह दिखती है

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
    
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

Woff2 फ़ाइल को डाउनलोड करने के लिए फ़ॉन्ट के स्रोत को ब्राउज़र में पेस्ट करें । आप चाहें तो इसका नाम बदल सकते हैं। मृत सरल मेरा कोड इस तरह दिखता है

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(materialIcon.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

जबकि materialIcon.woff2 डाउनलोड और प्रतिस्थापित woff2 फ़ाइल है।

— chris_wire
स्रोत

1

सभी ब्राउज़रों पर काम नहीं करता, अधिक जानकारी के लिए इस SO उत्तर को देखें: stackoverflow.com/questions/11002820/…

— xaviert

-1

npm install material-design-icons

तथा

@import '~material-design-icons/iconfont/material-icons.css';

मेरे लिए कोणीय सामग्री 8 के साथ भी काम किया

— side105
स्रोत

-1

इसे वेब कॉन्फ़िगरेशन में जोड़ा गया और त्रुटि दूर हो गई

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

— TFA
स्रोत

-1

वैसे यूट्यूब पर कदम निर्देश के साथ वीडियो उपलब्ध है।

https://youtu.be/7j6eOkhISzk

ये कदम हैं। Https://github.com/google/material-design-icons/releases से भौतिककृत आइकन पैकेज डाउनलोड करें
आइकन-फ़ॉन्ट फ़ोल्डर की प्रतिलिपि बनाएँ और इसे आइकन पर बदलें।
Materialize.css फ़ाइल खोलें और निम्न पथों को अपडेट करें:

ए। url (MaterialIcons-Regular.eot) से url (.. / फोंट / MaterialIcons-Regular.eot) b। url (MaterialIcons-Regular.woff2) प्रारूप ('woff2') से url (.. / फोंट / MaterialIcons-Regular.woff2) प्रारूप ('woff2') c। url (MaterialIcons-Regular.woff) प्रारूप ('woff') से url (.. / फोंट / MaterialIcons-Regular.woff) प्रारूप ('woff') d। url (MaterialIcons-Regular.ttf) प्रारूप ('truetype') से url (../ फोंट / MaterialIcons-Regular.ttf) प्रारूप ('truetype')

अपने css फ़ोल्डर में materialize-icon.css को कॉपी करें और अपनी html फ़ाइल में देखें।

सब कुछ जादू की तरह काम करेगा!

— SicMundus
स्रोत

मटेरियल आइकन को ऑफलाइन होस्ट कैसे करें?

सामग्री-डिजाइन-आइकन-आइकॉनफ़ॉन्ट का उपयोग करें

के माध्यम से स्थापित करें npm

डेमो पेज

के माध्यम से स्थापित करें `npm`