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

मटीरियल आइकॉन की खास जानकारी—ये आइकॉन कहां मिलेंगे और उन्हें अपने प्रोजेक्ट से कैसे जोड़ा जा सकता है.

मटीरियल आइकॉन क्या होते हैं?

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

मटीरियल आइकॉन लाइब्रेरी में मटीरियल डिज़ाइन आइकॉन का पूरा सेट देखें.

आइकॉन लाइब्रेरी

आइकॉन फ़ेच किए जा रहे हैं

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

लाइसेंस

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

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

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

सब कुछ डाउनलोड करना

सभी आइकॉन का नया स्टेबल ज़िप संग्रह (~310 एमबी) या मास्टर से ब्लीडिंग-एज वर्शन पाएं.

Git डेटा संग्रह स्थान

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

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

वेब के लिए आइकॉन फ़ॉन्ट

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

फ़ॉन्ट का इस्तेमाल करना न सिर्फ़ सबसे आसान तरीका है, बल्कि यह असरदार और बेहतरीन भी दिखता है:

  • एक छोटी फ़ाइल में 900 से ज़्यादा आइकॉन.
  • Google वेब फ़ॉन्ट सर्वर से दिखाया जाता है या खुद होस्ट किया जा सकता है.
  • यह सभी मॉडर्न वेब ब्राउज़र पर काम करता है.
  • रंगीन, साइज़, और पूरी तरह सीएसएस की मदद से रखा गया.
  • वेक्टर-आधारित: किसी भी स्केल, रेटिना डिसप्ले, लो-डीपीआई डिसप्ले स्क्रीन पर शानदार दिखता है.

आइकॉन फ़ॉन्ट का सबसे छोटे woff2 फ़ॉर्मैट में सिर्फ़ 42 केबी और स्टैंडर्ड woff फ़ॉर्मैट में 56 केबी होता है. दूसरी तरफ़, gzip के साथ कंप्रेस की गई SVG फ़ाइलों का साइज़ आम तौर पर 62 केबी के आस-पास होता है. हालांकि, सिर्फ़ उन आइकॉन को इकट्ठा करके इसे काफ़ी कम किया जा सकता है जिनकी आपको ज़रूरत होती है. ऐसा सिर्फ़ उन आइकॉन को मिलाकर एक SVG फ़ाइल में किया जा सकता है जिनकी ज़रूरत होती है.

सेटअप करने का पहला तरीका. Google Fonts से इस्तेमाल करना

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

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

अन्य Google वेब फ़ॉन्ट की तरह ही, ब्राउज़र के लिए खास तौर पर बने 'मटीरियल आइकॉन' फ़ॉन्ट को ऐक्टिवेट करने के लिए सही सीएसएस दिखाया जाएगा. .material-icons नाम के एक और सीएसएस क्लास का एलान किया जाएगा. इस क्लास का इस्तेमाल करने वाले किसी भी एलिमेंट के पास, वेब फ़ॉन्ट से इन आइकॉन को रेंडर करने के लिए सही सीएसएस होगा.

सेटअप का दूसरा तरीका. सेल्फ़ होस्टिंग

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

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

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

.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';
}

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

अपने वेब पेज में आइकॉन को शामिल करना आसान है. यहां एक छोटा सा उदाहरण दिया गया है:

चेहरा

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

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

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

ब्राउज़र लिगचर के साथ काम करने वाला वर्शन
Google Chrome 11
Mozilla Firefox 3.5
Apple Safari 5
Microsoft IE 10
Microsoft Edge 18
Opera 15
Apple मोबाइलSafari iOS 4.2
Android ब्राउज़र 3.0

जिन ब्राउज़र में लिगेचर का इस्तेमाल नहीं किया जा सकता उनके लिए, नीचे दिए गए उदाहरण की तरह न्यूमेरिक वर्ण रेफ़रंस का इस्तेमाल करके आइकॉन तय करें:

सामान्य
<span class="material-icons">&#xE87C;</span>

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

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

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

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

साइज़ बदलना

हालांकि, मटीरियल डिज़ाइन आइकॉन से जुड़े दिशा-निर्देशों के मुताबिक फ़ॉन्ट में आइकॉन का साइज़ किसी भी साइज़ में बदला जा सकता है, हम उन्हें 18, 24, 36 या 48 पिक्सल में दिखाने का सुझाव देते हैं. डिफ़ॉल्ट रिज़ॉल्यूशन 24 पिक्सल है.

मटीरियल डिज़ाइन के साइज़ से जुड़े दिशा-निर्देशों के लिए सीएसएस के नियम:

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

मटीरियल आइकॉन 24px में सबसे अच्छे दिखते हैं, लेकिन अगर आइकॉन को किसी दूसरे साइज़ में दिखाने की ज़रूरत है, तो ऊपर दिए गए सीएसएस नियमों का इस्तेमाल करने से मदद मिल सकती है:

18px
<span class="material-icons md-18">face</span>
24px
<span class="material-icons md-24">face</span>
36 पिक्सल
<span class="material-icons md-36">face</span>
48 पिक्सल
<span class="material-icons md-48">face</span>

रंग भरने से जुड़े गेम

आइकॉन फ़ॉन्ट का इस्तेमाल करने से, आइकॉन को किसी भी रंग के आइकॉन की स्टाइल में आसानी से बदला जा सकता है. मटीरियल डिज़ाइन वाले आइकॉन के दिशा-निर्देशों के मुताबिक, ऐक्टिव आइकॉन के लिए, हमारा सुझाव है कि उन्हें हल्के या गहरे रंग के बैकग्राउंड पर दिखाते समय, 54% ओपैसिटी पर काले या 100% ओपैसिटी पर सफ़ेद रंग का इस्तेमाल करें. अगर कोई आइकॉन बंद है या बंद है, तो हल्के और गहरे रंग के बैकग्राउंड के लिए 26% काले रंग का या 30% पर सफ़ेद रंग का इस्तेमाल करें.

ऊपर बताई गई मटीरियल सीएसएस स्टाइल का इस्तेमाल करके, यहां कुछ उदाहरण दिए गए हैं:

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

गहरे फ़ोरग्राउंड के रंग में, हल्के रंग के बैकग्राउंड पर आइकॉन बनाने का उदाहरण:

सामान्य
<span class="material-icons md-dark">face</span>
अक्षम किया गया
<span class="material-icons md-dark md-inactive">face</span>

गहरे रंग के बैकग्राउंड पर, हल्के फ़ोरग्राउंड के रंग में आइकॉन बनाने का उदाहरण:

सामान्य
<span class="material-icons md-light">face</span>
अक्षम किया गया
<span class="material-icons md-light md-inactive">face</span>

कस्टम आइकॉन का रंग सेट करने के लिए, फ़ॉन्ट के लिए पसंदीदा रंग तय करने वाला सीएसएस नियम तय करें:

.material-icons.orange600 { color: #FB8C00; }

और फिर आइकॉन का हवाला देते समय क्लास का इस्तेमाल करें:

सामान्य
<span class="material-icons orange600">face</span>

वेब के लिए आइकॉन इमेज

मटीरियल आइकॉन, सामान्य इमेज के तौर पर भी उपलब्ध होते हैं. ये आइकॉन, PNG और SVG, दोनों फ़ॉर्मैट में उपलब्ध होते हैं.

SVG

सामग्री वाले आइकॉन, SVG के तौर पर दिए गए हैं, जो वेब प्रोजेक्ट के लिए सही हैं. अलग-अलग आइकॉन को सामग्री आइकॉन लाइब्रेरी से डाउनलोड किया जा सकता है. ये SVG, पाथ में मटीरियल डिज़ाइन आइकॉन git रिपॉज़िटरी से भी उपलब्ध हैं:

material-design-icons/src/

उदाहरण के लिए, मैप के आइकॉन src/maps में होते हैं:

material-design-icons/src/maps/

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

PNG

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

material-design-icons/png/

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

Android के लिए आइकॉन

Android के लिए सही PNG, सामग्री आइकॉन लाइब्रेरी में उपलब्ध हैं. ये सभी स्क्रीन डेंसिटी (सघनता) के साथ काम करते हैं, इसलिए ये हर डिवाइस पर अच्छे से दिखने चाहिए.

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

वेक्टर ड्रॉएबल फ़िलहाल सिर्फ़ काले 24dp आइकॉन के तौर पर उपलब्ध है. यह आइकॉन हमारे सबसे स्टैंडर्ड साइज़ के साथ काम करता है. आइकॉन को किसी दूसरे रंग में रेंडर करने के लिए, Android Lollipop पर उपलब्ध ड्रॉ करने लायक टिंटिंग का इस्तेमाल करें.

वेक्टर ड्रॉएबल का उपयोग करते समय, हो सकता है कि xxxhdpi सघनता PNG को शामिल करना आवश्यक न हो, क्योंकि ऐसा होने की संभावना नहीं है कि स्क्रीन सघनता का समर्थन करने वाला डिवाइस, वेक्टर ड्रॉएबल का समर्थन नहीं करता.

iOS के लिए आइकॉन

मटीरियल आइकॉन, iOS ऐप्लिकेशन में भी अच्छे से काम करते हैं. सामग्री आइकॉन लाइब्रेरी और गिट रिपॉज़िटरी, दोनों में इन आइकॉन को Xcode इमेजसेट में रखा जाता है, जो Xcode एसेट कैटलॉग (xcassets) के साथ आसानी से काम करेगा. इन इमेजसेट को किसी भी Xcode एसेट कैटलॉग में जोड़ा जा सकता है. ऐसा करने के लिए, उन्हें Xcode में खींचकर एसेट कैटलॉग में छोड़ें या फ़ोल्डर को xcasset फ़ोल्डर में कॉपी करें.

iOS इमेजसेट

इमेजसेट में सिंगल, डबल, और ट्रिपल सघनता वाली इमेज (1x, 2x, 3x) होती हैं, ताकि वे iOS की सभी स्क्रीन डेंसिटी पर काम करें. काले और सफ़ेद, दोनों आइकॉन उपलब्ध कराए गए हैं, लेकिन हम UIImage की ImageWithरेरेंडरमोड के साथ UIImageRenderingModeAlwaysTemplate के लिए, अल्फ़ा मास्क के रूप में इस्तेमाल करने का सुझाव देते हैं जिसे किसी भी संभावित रंग में रंगा जा सकता है.

ऑब्जेक्टिव-सी का उदाहरण:

UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
    [[UIImage imageNamed:@"ic_close"]
       imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];

Swift का उदाहरण:

let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
    UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)

RTL में आइकॉन

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

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

Android डिवाइस पर RTL आइकॉन

इस Android डेवलपर लेख में, RTL के यूज़र इंटरफ़ेस को लागू करने के तरीके के बारे में पूरी जानकारी दी गई है. डिफ़ॉल्ट रूप से, लेआउट की दिशा को मिरर करने पर आइकॉन नहीं दिखते. ज़रूरत पड़ने पर, आपको खास तौर पर सही आइकॉन को मिरर करना होगा. इसके लिए, आपको RTL की भाषाओं के लिए खास एसेट उपलब्ध कराना होगा या एसेट को मिरर करने के लिए, फ़्रेमवर्क फ़ंक्शन का इस्तेमाल करना होगा.

RTL की भाषाओं के लिए खास एसेट उपलब्ध कराने के लिए, आपके पास res/drawable-ldrtl/ जैसी रिसॉर्स डायरेक्ट्री पर ldrtl क्वालीफ़ायर इस्तेमाल करने का विकल्प है. ऐसी डायरेक्ट्री में मौजूद संसाधन, सिर्फ़ RTL वाली भाषाओं के लिए इस्तेमाल किए जाएंगे. Android API 19 या इसके बाद के वर्शन वाले डिवाइसों पर, Drawables के लिए फ़्रेमवर्क autoMirrored एट्रिब्यूट भी उपलब्ध कराता है. जब इस एट्रिब्यूट को 'सही है' पर सेट किया जाता है, तब ड्रॉ करने लायक टेक्स्ट, RTL की भाषाओं में अपने-आप बन जाएगा.

ऑटोमिरेड की सुविधा का इस्तेमाल करके:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal"
        android:autoMirrored="true">
  <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
                          8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

अगर Autoमिररिंग का इस्तेमाल नहीं किया जा सकता या ड्रॉ करने लायक वैकल्पिक रिसॉर्स का इस्तेमाल नहीं किया जा सकता, तो ImageView scaleX एट्रिब्यूट का इस्तेमाल ड्रॉ करने लायक चीज़ों को मिरर करने के लिए भी किया जा सकता है. उदाहरण के लिए, res/layout-ldrtl डायरेक्ट्री में RTL के हिसाब से लेआउट देकर.

लेआउट फ़ाइल में डुप्लीकेट वर्शन बनाना:

<ImageView
    android:id="@+id/my_icon"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:scaleX="-1" />

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

getLayoutDirection का इस्तेमाल करके, लेआउट की दिशा जानने के लिए, मैन्युअल तरीके से जांच करें:

if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
  // custom code
}

प्रोग्राम के हिसाब से, ImageView कॉन्टेंट को मिररिंग करना:

imageView.setScaleX(-1);

iOS पर RTL आइकॉन

iOS में UISemanticContentAttribute का कॉन्सेप्ट है, जो हर व्यू से जुड़ा होता है. यह unspecified, forceLeftToRight, forceRightToLeft, playback या spatial हो सकता है. iOS इस वैल्यू के साथ-साथ, इंटरफ़ेस दिखाने वाले डिवाइस की (बाएं से दाएं (LTR)/RTL सेटिंग) का इस्तेमाल करता है, ताकि व्यू का यूज़र इंटरफ़ेस लेआउट तय करने में मदद मिले. यह effectiveLayoutDirection तय करता है कि किसी इमेज के दिखने पर उसे मिरर करना है या नहीं.

डिफ़ॉल्ट रूप से, इमेज की सिमैंटिक कॉन्टेंट unspecified पर सेट होती है. इसकी वजह से, RTL मोड में स्क्रीन शेयर की जाती है. अगर आपको किसी आइकॉन को शेयर नहीं करना है, तो आपको साफ़ तौर पर उसे forceLeftToRight पर सेट करना होगा. Apple के कुछ अपवादों के बारे में बताया गया है कि उनका डुप्लीकेट वर्शन नहीं बनाना चाहिए. जैसे, मीडिया प्लेबैक (फ़ास्ट फ़ॉरवर्ड, रिवाइंड वगैरह), संगीत के नोट, समय के बारे में बताने वाली इमेज वगैरह.

ऑब्जेक्टिव-सी का उदाहरण:

// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
  UISemanticContentAttributeForceLeftToRight;

Swift का उदाहरण:

// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;

iOS और macOS पर RTL को लागू करने के तरीके के बारे में ज़्यादा जानकारी के लिए, कृपया Apple का RTL दस्तावेज़ देखें.

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

वेब पर RTL आइकॉन

हम वेब पर RTL के लिए प्राइमर के तौर पर, इस लेख को इस्तेमाल करने का सुझाव देते हैं: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2

डिफ़ॉल्ट रूप से, लेआउट की दिशा का डुप्लीकेट वर्शन बनाने पर, आइकॉन नहीं दिखते. ज़रूरत पड़ने पर, आपको सही आइकॉन देखने होंगे.

नीचे दिए गए उदाहरण में, RTL के आसान सीएसएस नियम को लागू करने का तरीका बताया गया है. इसे कोडपेन पर भी देखा जा सकता है.

page.html

<html dir="rtl">
  <img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>

page.css

html[dir="rtl"] .icon {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

ImageMagick का इस्तेमाल करके अपने RTL आइकॉन जनरेट करें

अगर कोड में आइकॉन को मिरर करना एक विकल्प नहीं है, तो इमेज को हॉरिज़ॉन्टल रूप से मिरर करने के लिए ImageMagick का इस्तेमाल किया जा सकता है.

convert -flop my_icon.png my_icon_rtl.png

दाएं से बाएं या बाएं से दाएं किन आइकॉन को मिरर करना है?

यहां उन आइकॉन की सूची दी गई है जिन्हें प्रोग्राम के हिसाब से, RTL में मिरर किया जा सकता है:
ऐरो बैक ऐरो बैक iOS ऐरो से आगे की ओर ले जाएं
ऐरो फ़ॉरवर्ड iOS लेफ़्ट ऐरो राइट ऐरो
असाइनमेंट असाइनमेंट वापस किए गए बैकस्पेस
बैटरी की जानकारी नहीं है कॉल किया गया कॉल मर्ज
कॉल मिस हो गया कॉल का आउटगोइंग आउटगोइंग कॉल कॉल मिला
कॉल का बंटवारा किया गया शेवरॉन बाईं ओर मौजूद है शेवरॉन दाईं ओर
Chrome रीडर मोड डिवाइस की जानकारी नहीं है डीवीआर
इवेंट नोट की चुनिंदा प्लेलिस्ट चुनिंदा वीडियो
पहला पेज फ़्लाइट लैंड की फ़्लाइट का टेकऑफ़
फ़ॉर्मैट का इंडेंट घटाएं फ़ॉर्मैट का इंडेंट बढ़ाएं फ़ॉर्मैट की सूची को बुलेट किया गया
फ़ॉरवर्ड फ़ंक्शन इनपुट
कीबोर्ड टैब लेबल लेबल ज़रूरी है
लेबल की आउटलाइन आखिरी पेज लॉन्च
सूची लाइव सहायता मोबाइल स्क्रीन शेयर
मल्टीलाइन चार्ट पहले नेविगेट करें अगला नेविगेट करें
अगले हफ़्ते के लिए नोट नए में खोलें
प्लेलिस्ट जोड़ी गई सूची में शामिल संगीत फिर से करें
जवाब सभी को जवाब दें स्क्रीन शेयर
भेजें छोटा टेक्स्ट शो का चार्ट
क्रम से लगाएं स्टार हाफ़ विषय
रुझान में बदलाव टॉक घट रहा है
रुझान में है पहले जैसा करें व्यू लिस्ट
व्यू रज़ाई टेक्स्ट रैप करें