इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

`FILL` ऐक्सिस

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

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

`wght` ऐक्सिस

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

`GRAD` ऐक्सिस

ग्रेड ऐक्सिस का विज़ुअलाइज़ेशन

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

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

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

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

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

`opsz` ऐक्सिस

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

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

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

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

लाइसेंस देना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

आइकॉन फ़ॉन्ट को ऑप्टिमाइज़ करना

फ़ॉन्ट को सबसेट के तौर पर सेट करें, ताकि ऐप्लिकेशन के आइकॉन ही शामिल किए जा सकें वर्णमाला के क्रम में लगाए गए तरीके का इस्तेमाल करके, &icon_names क्वेरी पैरामीटर का इस्तेमाल किया जा रहा है आइकॉन के नामों की कॉमा-सेपरेटेड लिस्ट (संबंध)

इसका सुझाव नहीं दिया जाता — डिफ़ॉल्ट सेटिंग का इस्तेमाल किया जा रहा है सेटिंग, सभी 3,800 से ज़्यादा आइकॉन लोड करती है. फ़ॉन्ट पेलोड: 295 केबी
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
```
सुझाया गया — सिर्फ़ ज़रूरी आइकॉन लोड करने के लिए, आइकॉन के नाम बताएं. फ़ॉन्ट पेलोड: 1.7 केबी
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block
```
वैरिएबल फ़ॉन्ट ऐक्सिस को सिर्फ़ अपने ऐप्लिकेशन में शामिल करने के लिए इंस्टेंस करें इस्तेमाल करेगा. ज़्यादातर ऐप्लिकेशन को ऐक्सिस के कुछ ही वैरिएशन की ज़रूरत होती है.

इसका सुझाव नहीं दिया जाता — ऐक्सिस कॉन्फ़िगरेशन मौजूद न होने पर, डिफ़ॉल्ट स्टैटिक फ़ॉन्ट (वज़न 400, ऑप्टिकल साइज़ 24, राउंड 50, ग्रेड 0, फ़िल 0). आम तौर पर, सभी वैरिएबल फ़ॉन्ट ऐक्सिस को पूरा शामिल करना ज़रूरी नहीं होता. ऐसा करने से, पेलोड. फ़ॉन्ट का पेलोड: 7.9 एमबी
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100
```
इसका सुझाव दिया जाता है — ऐक्सिस के खास कॉम्बिनेशन का इस्तेमाल किया जाता है. उदाहरण के लिए, पूरा 'FILL' ऐक्सिस, स्टेटस के बीच सीएसएस ट्रांज़िशन उपलब्ध कराता है. साथ ही, 'ROND' 100 को डिज़ाइन के तौर पर चुना गया है. फ़ॉन्ट का पेलोड: 2.6 केबी
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
```

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

आइकॉन फ़ॉन्ट को ऐसी जगह पर होस्ट करें जिस पर आपका कंट्रोल हो, ताकि आप यह तय कर सकें कि ऐसेट को कब अपडेट करना है. उदाहरण के लिए, अगर यूआरएल 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 स्टाइलशीट के हिस्से के तौर पर पेश किया जाता है, लेकिन सेल्फ़-होस्टिंग सुविधा इस्तेमाल करते समय, आपको अपने प्रोजेक्ट में मैन्युअल तरीके से शामिल करना होगा:

.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 डेटा स्टोर करने की जगह नाम और वर्ण कोड का पूरा सेट दिखाता है.

Material Design में आइकॉन को स्टाइल करना

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

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

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

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

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

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

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