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

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

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

FILL ऐक्सिस

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

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

wght ऐक्सिस

वज़न की मदद से प्रतीक के स्ट्रोक की मोटाई तय की जाती है, जिसमें पतले (100) और बोल्ड (700) के बीच वज़न की रेंज होती है. वज़न से भी प्रतीक के पूरे आकार पर असर पड़ सकता है.

GRAD ऐक्सिस

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

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

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

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

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

opsz ऐक्सिस

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

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

मटीरियल हासिल करने के सिंबल

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

लाइसेंस

मटीरियल सिंबल, Apache लाइसेंस वर्शन 2.0 में उपलब्ध हैं.

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

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

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

गिट रिपॉज़िटरी में SVG फ़ॉर्मैट में Material Symbols का पूरा सेट शामिल होता है.

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

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

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

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

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

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

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

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

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

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

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

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

इसके अलावा, वीडियो को ऐनिमेट भी किया जा सकता है!

CodePen पर

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

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

@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 होगा. अन्य आइकॉन के लिए, आइकॉन के नाम के स्नेक केस का इस्तेमाल करें (जैसे, स्पेस को अंडरस्कोर से बदलें).

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

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

CodePen पर

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

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

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

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

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

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

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

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

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