अपडेट (31/03/2019): सभी आइकन थीम अब Google वेब फ़ॉन्ट्स के माध्यम से काम करते हैं।
जैसा कि एड्रिक ने कहा है, अब आपके दस्तावेज़ के सिर में Google वेब फोंट लिंक जोड़ने की बात है, जैसे:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
और फिर एक विशेष विषय के आइकन को आउटपुट करने के लिए सही वर्ग को जोड़ना।
<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
सीएसएस के साथ ही आइकन का रंग बदला जा सकता है।
नोट: टू-टोन थीम आइकन वर्तमान में थोड़ा गड़बड़ है।
अद्यतन (14/11/2018): 16 रूपरेखा आइकन की सूची जो "_outline" प्रत्यय के साथ काम करती है।
यहाँ 16 आउटलाइन आइकन की सबसे हाल की सूची है जो _outline प्रत्यय (परीक्षण और पुष्टि) का उपयोग करके नियमित सामग्री-आइकन वेबफॉन्ट के साथ काम करती है ।
(जैसा कि सामग्री-डिज़ाइन-आइकन github पृष्ठ पर पाया गया है । इसके लिए खोजें: " _outline_24px.svg ")
<i class="material-icons">help_outline</i>
<i class="material-icons">label_outline</i>
<i class="material-icons">mail_outline</i>
<i class="material-icons">info_outline</i>
<i class="material-icons">lock_outline</i>
<i class="material-icons">lightbulb_outline</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">add_circle_outline</i>
<i class="material-icons">people_outline</i>
<i class="material-icons">person_outline</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons">remove_circle_outline</i>
<i class="material-icons">check_box_outline_blank</i>
<i class="material-icons">pie_chart_outlined</i>
ध्यान दें कि pie_chart को " pie_chart_ उल्लिखित " होना चाहिए और रूपरेखा नहीं ।
यह इनलाइन टैग का उपयोग करके नए आइकन थीम का परीक्षण करने के लिए एक हैक है। यह आधिकारिक समाधान नहीं है।
आज से (19 जुलाई, 2018), नए आइकन थीम पेश किए जाने के 2 महीने से थोड़ा अधिक समय हो गया है, इन आइकन को इनलाइन टैग का उपयोग करने के लिए शामिल करने का कोई तरीका नहीं है<i class="material-icons"></i> ।
+ मार्टिन ने बताया है कि गितुब पर उसी के संबंध में एक मुद्दा उठाया गया है: https://github.com/google/material-design-icons/issues/773
इसलिए, जब तक Google इसके लिए कोई समाधान नहीं निकालता, तब तक मैंने एसवीजी या पीएनजी के रूप में उपयुक्त आइकन डाउनलोड करने से पहले अपने विकास के माहौल में इन नए आइकन थीमों को शामिल करने के लिए एक हैक का उपयोग करना शुरू कर दिया है । और मुझे लगा कि मैं इसे आप सभी के साथ साझा करूंगा।
महत्वपूर्ण : उत्पादन वातावरण पर इसका उपयोग न करें क्योंकि Google से शामिल सीएसएस फ़ाइलों में से प्रत्येक का आकार 1 एमबी से अधिक है।
Google इन स्टाइलशीट का उपयोग अपने डेमो पेज पर आइकन दिखाने के लिए करता है:
रूपरेखा:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
गोल:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">
दो लहजा:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">
तीव्र:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
इन फ़ाइलों में से प्रत्येक में पृष्ठभूमि-चित्र (Base64 छवि-डेटा) के रूप में शामिल संबंधित विषयों के आइकन शामिल हैं। और यहां बताया गया है कि हम इसका उपयोग उत्पादन वातावरण में उपयोग के लिए डाउनलोड करने से पहले अपने डिजाइन में किसी विशेष आइकन की अनुकूलता का परीक्षण करने के लिए कैसे कर सकते हैं।
चरण 1 :
उस विषय की स्टाइलशीट को शामिल करें जिसका आप उपयोग करना चाहते हैं। जैसे: 'उल्लिखित' विषय के लिए, 'रूपरेखा' के लिए स्टाइलशीट का उपयोग करें।
चरण 2 :
अपनी स्वयं की स्टाइलशीट में निम्न वर्ग जोड़ें :
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
चरण 3 :
निम्नलिखित कक्षाओं को <i>टैग में जोड़कर आइकन का उपयोग करें :
1) material-icons-newवर्ग
2) आइकन का नाम जैसा कि सामग्री आइकन डेमो पेज पर दिखाया गया है, एक हाइफ़न के बाद थीम नाम के साथ उपसर्ग किया गया है।
उपसर्ग:
उल्लिखित: outline-
गोल: round-
दो लहजा: twotone-
तीव्र: sharp-
जैसे ('घोषणा' आइकन के लिए):
outline-announcement, round-announcement, twotone-announcement,sharp-announcement
3) icon-whiteकाले से सफेद रंग के लिए (डार्क बैकग्राउंड के लिए) इनवर्टर के लिए एक वैकल्पिक 3 वर्ग का उपयोग करें
आइकन का आकार बदलना:
चूंकि यह एक पृष्ठभूमि-छवि है और फ़ॉन्ट-आइकन नहीं है, इसलिए आइकन के आकार को संशोधित करने के लिए CSS के गुणों heightऔर widthगुणों का उपयोग करें । डिफ़ॉल्ट को material-icons-newवर्ग में 24px पर सेट किया गया है ।
उदाहरण:
केस I: account_circle आइकन के उल्लिखित विषय के लिए :
1) स्टाइलशीट शामिल करें:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
2) अपने पेज पर आइकन टैग जोड़ें:
<i class="material-icons-new outline-account_circle"></i>
वैकल्पिक (अंधेरे पृष्ठभूमि के लिए):
<i class="material-icons-new outline-account_circle icon-white"></i>
केस II: मूल्यांकन आइकन के तीव्र थीम के लिए :
1) स्टाइलशीट शामिल करें:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
2) अपने पेज पर आइकन टैग जोड़ें:
<i class="material-icons-new sharp-assessment"></i>
(डार्क बैकग्राउंड के लिए):
<i class="material-icons-new sharp-assessment icon-white"></i>
मैं पर्याप्त तनाव नहीं कर सकता कि यह आपके उत्पादन वातावरण पर माउस को शामिल करने के लिए सही तरीका नहीं है। लेकिन अगर आपको अपने इन-डेवलपमेंट पेज पर कई आइकनों के माध्यम से स्कैन करना पड़ता है, तो यह आइकन को बहुत आसान बना देता है और बहुत समय बचाता है।
आइकन को एसवीजी या पीएनजी के रूप में डाउनलोड करना सुनिश्चित करना एक बेहतर विकल्प है जब यह साइट-स्पीड ऑप्टिमाइज़ेशन के लिए आता है, लेकिन फॉन्ट-आइकन्स एक टाइम-सेवर हैं जब यह प्रोटोटाइप चरण में आता है और जाँचता है कि क्या कोई विशेष आइकन आपके डिज़ाइन के साथ जाता है, आदि।
मैं इस पोस्ट को तब अपडेट करूंगा जब और Google इस समस्या के समाधान के साथ आएगा, जिसमें उपयोग के लिए एक आइकन डाउनलोड करना शामिल नहीं है।
