आइकॉन

पहले से लोड किए गए Material आइकॉन फ़ॉन्ट का इस्तेमाल करके, DevSite पेज पर किसी भी टेक्स्ट में आइकॉन जोड़े जा सकते हैं . किसी बटन के बारे में बताते समय, बटन के आइकॉन का इस्तेमाल भी किया जा सकता है.

मटीरियल आइकॉन

DevSite पेज पर, अपने टेक्स्ट के साथ इनलाइन में कोई Material आइकॉन जोड़ने के लिए:

1. https://fonts.google.com/icons पर जाएं, न कि go/icons पर.
2. मटीरियल आइकॉन खोजें बॉक्स में, अपनी पसंद का आइकॉन खोजें.
3. इस्तेमाल की जानकारी देखने के लिए, आइकॉन पर क्लिक करें.
4. इस्तेमाल की जानकारी वाले पैनल के आइकॉन फ़ॉन्ट सेक्शन में जाकर, दूसरे कोड ब्लॉक से आइकॉन का नाम कॉपी करें.

5. आइकॉन जोड़ने के लिए, नीचे दिए गए कोड को अपने टेक्स्ट में कॉपी करें:

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

6. आइकॉन का रंग या ज़रूरत पड़ने पर उसका साइज़ बदलने के लिए, style एट्रिब्यूट का इस्तेमाल करें.

उदाहरण

नीचे दिए गए कोड से यह टेक्स्ट बनता है: "किसी खास इवेंट की जानकारी देखने के लिए, arrow_right एक्सपैंडर ऐरो पर क्लिक करें."

To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.

<span> के बजाय, <i> का इस्तेमाल किया जा सकता है. दोनों टैग काम करते हैं. हालांकि, स्पैन, सेमेटिक्स के हिसाब से ज़्यादा सटीक होता है. उदाहरण के लिए, "delete मिटाएं मिटाएं पर क्लिक करें" के लिए, इस कोड का इस्तेमाल किया जा सकता है:

Click <i class="material-icons">delete</i> <b>Delete</b>.

class="material-icons" वाले हर एलिमेंट के लिए, DevSite aria-hidden="true" और translate="no" एट्रिब्यूट जोड़ता है. इससे स्क्रीन रीडर के लिए बेहतर उपयोगकर्ता अनुभव मिलता है. ऐसा, सुलभता ट्री से ग़ैर-ज़रूरी आइटम हटाकर किया जाता है. साथ ही, आइकॉन के नाम का गलत अनुवाद होने से भी रोका जाता है.

बटन के आइकॉन

बटन आइकॉन का इस्तेमाल करने वाले किसी तरीके का दस्तावेज़ बनाते समय, <img> टैग में class="inline-icon" जोड़ें. ज़्यादा जानकारी के लिए, बटन और आइकॉन के लिए स्टाइल गाइड देखें.

उदाहरण

नीचे दिया गया कोड, " प्रोजेक्ट बनाएं पर क्लिक करें" टेक्स्ट दिखाता है.

Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.