मटीरियल सिंबल गाइड

मटीरियल सिंबल क्या होते हैं?

मटीरियल सिंबल हमारे सबसे नए आइकॉन हैं, जो 2,500 से ज़्यादा ग्लिफ़ को एक से ज़्यादा फ़ॉन्ट वाली फ़ाइल बना सकते हैं. सिंबल यहां उपलब्ध हैं तीन स्टाइल और चार अडजस्ट किए जा सकने वाले वैरिएबल फ़ॉन्ट ऐक्सिस (फ़िल, वेट, ग्रेड, और ऑप्टिकल साइज़). सामग्री प्रतीक का पूरा सेट मटीरियल सिंबल लाइब्रेरी.

FILL ऐक्सिस

'फ़िल' सुविधा से, आइकॉन की डिफ़ॉल्ट स्टाइल में बदलाव किया जा सकता है. एक आइकॉन यह कर सकता है खाली और भरी हुई, दोनों स्थितियों को रेंडर करना होगा.

स्थिति के ट्रांज़िशन के बारे में बताने के लिए, ऐनिमेशन या इंटरैक्शन के लिए फ़िल ऐक्सिस का इस्तेमाल करें. डिफ़ॉल्ट रूप से वैल्यू 0 या पूरी तरह से भरी हुई वैल्यू के लिए 1 होती है. वज़न के साथ-साथ ऐक्सिस से, फ़िल इफ़ेक्ट की मदद से आइकॉन के लुक पर भी असर पड़ता है.

wght ऐक्सिस

वज़न से चिह्न के स्ट्रोक की मोटाई तय की जाती है. स्ट्रोक का वेट, थिन (100) और बोल्ड (700). वज़न की वजह से, चिह्न होता है.

GRAD ऐक्सिस

वज़न और ग्रेड से, सिंबल की चौड़ाई पर असर पड़ता है. ग्रेड में किए गए बदलाव हैं ये वज़न में किए जाने वाले अडजस्टमेंट की तुलना में ज़्यादा विस्तृत होते हैं. साथ ही, साइज़ पर छोटा सा असर चिह्न.

ग्रेड कुछ टेक्स्ट फ़ॉन्ट में भी उपलब्ध है. आप इन दोनों के बीच के ग्रेड लेवल का मिलान कर सकते हैं विज़ुअल इफ़ेक्ट के लिए टेक्स्ट और सिंबल का इस्तेमाल करें. उदाहरण के लिए, अगर टेक्स्ट फ़ॉन्ट का ग्रेड मान -25 है, चिह्न इसका मिलान किसी उपयुक्त मान से कर सकते हैं, जैसे -25.

अलग-अलग ज़रूरतों के लिए ग्रेड का इस्तेमाल किया जा सकता है:

कम ज़ोर (जैसे, -25 ग्रेड): गहरे रंग वाले सिंबल पर किसी लाइट की चमक कम करने के लिए बैकग्राउंड, कम ग्रेड का इस्तेमाल करें.

ज़्यादा ज़ोर देना (जैसे, 200 ग्रेड): किसी सिंबल को हाइलाइट करने के लिए, पॉज़िटिव वैल्यू को बढ़ाएं ग्रेड.

opsz ऐक्सिस

ऑप्टिकल साइज़ 20dp से 48dp तक होता है.

इमेज के अलग-अलग साइज़ में एक जैसी दिखने के लिए, स्ट्रोक की मोटाई (मोटाई) आइकॉन के साइज़ में बदलाव होने पर. ऑप्टिकल साइज़ की मदद से, चिह्न का साइज़ बढ़ाने या घटाने के बाद, स्ट्रोक का वेट कम या ज़्यादा किया जा सकता है.

सामग्री के सिंबल पाना

मटीरियल सिंबल का इस्तेमाल कई फ़ॉर्मैट में किया जा सकता है और अलग-अलग फ़ॉर्मैट में डेवलपर को उनके ऐप्लिकेशन में और या प्रोटोटाइप बनाए.

लाइसेंस देना

मटीरियल सिंबल Apache लाइसेंस वर्शन 2.0.

अलग-अलग आइकॉन को ब्राउज़ और डाउनलोड करना

मटीरियल सिंबल का पूरा सेट यहां से उपलब्ध है: मटीरियल सिंबल लाइब्रेरी SVG या PNG फ़ॉर्मैट में. वे वेब, Android, और iOS के लिए या किसी भी डिवाइस डिज़ाइन टूल.

Git डेटा स्टोर करने की जगह

कॉन्टेंट बनाने git डेटा स्टोर करने की जगह SVG फ़ॉर्मैट में मटीरियल सिंबल का पूरा सेट शामिल होता है.

$ git clone https://github.com/google/material-design-icons

मटीरियल सिंबल का इस्तेमाल करना

वेब में इस्तेमाल करें

मटीरियल सिंबल फ़ॉन्ट, मटीरियल सिंबल को शामिल करने का सबसे आसान तरीका है का इस्तेमाल किस तरह करना है.

आइकॉन को एक ही फ़ॉन्ट में पैक किया जाता है, ताकि वेब डेवलपर आसानी से कोड की कुछ लाइनों का इस्तेमाल करके, इन आइकॉन को शामिल करें.

Google फ़ॉन्ट के साथ स्टैटिक फ़ॉन्ट

किसी भी वेब पेज में इस्तेमाल करने के लिए आइकॉन फ़ॉन्ट सेट अप करने का सबसे आसान तरीका है Google Fonts. HTML की इस एक पंक्ति को शामिल करें:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

ऊपर दिए गए स्निपेट में हर एक के लिए डिफ़ॉल्ट कॉन्फ़िगरेशन शामिल है ऐक्सिस, के साथ वज़न 400 पर, ऑप्टिकल साइज़ लेकिन 48 साल की उम्र में, ग्रेड 0 बजे और फ़िल (भी 0.)

इसका इस्तेमाल करें फ़ॉन्ट सीएसएस एपीआई ऐक्सिस की अलग-अलग वैल्यू को कॉन्फ़िगर करने के लिए. इन उदाहरणों पर नज़र डालें:

Google फ़ॉन्ट के साथ वैरिएबल फ़ॉन्ट

यदि आप CSS के माध्यम से आइकन ऐनिमेट कर रहे हैं, या आइकन सुविधाओं पर बेहतर नियंत्रण चाहते हैं, तो इसका उपयोग करें के साथ दिखाया जाएगा. number..number फ़ॉर्मैट में रेंज का इस्तेमाल करके, हम पूरे वैरिएबल फ़ॉन्ट को लोड कर सकते हैं. चेक आउट करने का समय क्या मैं वैरिएबल फ़ॉन्ट सपोर्ट करने की सुविधा का इस्तेमाल कर सकता/सकती हूं यह समझने के लिए कि आपके उपयोगकर्ता वैरिएबल फ़ॉन्ट लोड कर पाएंगे या नहीं, सबसे बहुत कम संभावना है. यहां कुछ उदाहरण दिए गए हैं:

चाहें तो इन्हें ऐनिमेट भी करें!

फ़ॉन्ट को खुद होस्ट करना

होस्ट करें आइकॉन का फ़ॉन्ट आपके कंट्रोल में मौजूद जगह पर. इससे यह तय किया जा सकता है कि ऐसेट को कब अपडेट करना है. इसके लिए उदाहरण के लिए, अगर यूआरएल https://example.com/material-symbols.woff है, तो यह CSS नियम अपनाएं:

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

ध्यान दें: सभी उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, अलग-अलग फ़ॉन्ट फ़ॉर्मैट में की ज़रूरत होती है, जो Google Fonts API से मिलती है. “सेल्फ़ होस्टिंग” के बारे में ज़्यादा जानें तारीख Google Fonts से जुड़ी जानकारी.

फ़ॉन्ट को सही तरीके से रेंडर करने के लिए, आइकॉन को रेंडर करने वाले सीएसएस नियमों का एलान करें. ये नियमों को आम तौर पर Google Fonts API स्टाइलशीट के हिस्से के तौर पर पेश किया जाता है, लेकिन सेल्फ़-होस्टिंग सुविधा इस्तेमाल करते समय, आपको अपने प्रोजेक्ट में मैन्युअल तरीके से शामिल करना होगा:

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  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;
}

एचटीएमएल में आइकॉन का इस्तेमाल करना

ऊपर दिए गए उदाहरण एक टाइपोग्राफ़िक सुविधा का इस्तेमाल करते हैं, जिसे लिगेचर, इसकी मदद से, आइकॉन ग्लिफ़ को उसके टेक्स्ट वाले नाम से रेंडर किया जा सकता है. कॉन्टेंट बनाने वेब ब्राउज़र, टेक्स्ट लिगेचर को आइकॉन वेक्टर से अपने-आप बदल देता है और समान अंकीय वर्ण संदर्भ की तुलना में ज़्यादा पढ़ने लायक कोड देता है. इसके लिए उदाहरण के लिए, आपके एचटीएमएल में, आइकॉन को दिखाने के लिए arrow_forward होगा,  के बजाय. अन्य आइकॉन के लिए, आइकॉन के नाम का स्नेक केस इस्तेमाल करें (जैसे, स्पेस को अंडरस्कोर से बदलें).

यह सुविधा ज़्यादातर आधुनिक ब्राउज़र में डेस्कटॉप और मोबाइल, दोनों पर काम करती है डिवाइस. यहां जाएं: क्या मेरे पास लिगेचर सपोर्ट का इस्तेमाल करने की अनुमति है ताकि यह देखा जा सके कि आपके उपयोगकर्ता लिगेचर को प्रोसेस कर सकते हैं या नहीं. कर सकते हैं.

यदि आपको ऐसे ब्राउज़र का समर्थन करने की आवश्यकता है जो लिगेचर का समर्थन नहीं करते हैं, तो आइकॉन, जो उदाहरण के तौर पर न्यूमेरिक वर्ण के रेफ़रंस (यानी कोडपॉइंट) का इस्तेमाल करते हों नीचे दिया गया है:

आइकॉन के नाम और कोडपॉइंट, दोनों ढूंढें मटीरियल सिंबल लाइब्रेरी किसी भी आइकन को चुनकर और आइकन का फ़ॉन्ट पैनल खोलकर. प्रत्येक आइकन फ़ॉन्ट में Google Fonts में कोडपॉइंट इंडेक्स git डेटा स्टोर करने की जगह नाम और वर्ण कोड का पूरा सेट दिखाता है.

मटीरियल डिज़ाइन में आइकॉन की स्टाइल

इन आइकॉन को इस तरह से डिज़ाइन किया गया है कि मटीरियल डिज़ाइन के लिए दिशा-निर्देश, और वे सुझाए गए आइकॉन साइज़ और रंगों का इस्तेमाल करने पर बेहतर दिखते हैं. स्टाइल नीचे दिए गए हैं, ताकि आप हमारे सुझाए गए साइज़, रंग, और गतिविधि की स्थितियों को आसानी से लागू कर सकें.

Android में इस्तेमाल करें

मटीरियल सिंबल लाइब्रेरी में, सभी आइकॉन वेक्टर ड्रॉ करने लायक फ़ॉर्मैट में होते हैं. यहां की यात्रा पर हूं ज़्यादा जानने के लिए, Android वेक्टर ऐसेट स्टूडियो दस्तावेज़.

iOS में इस्तेमाल करें

ये आइकॉन, Apple Symbols फ़ॉर्मैट में भी उपलब्ध हैं. उनके बारे में ज़्यादा जानने के लिए, Apple Symbols देखें खास जानकारी और इस्तेमाल के लिए दिशा-निर्देश.

Flutter में इस्तेमाल करें

मटीरियल सिंबल के लिए Flutter इस्तेमाल करने की योजना है. अपडेट पाने के लिए हमारे साथ बने रहें.