Icons

You can add icons to any text on a DevSite page by using the preloaded Material icon font . You can also use button icons when referring to a button.

Material icons

To add a Material icon inline with your text on a DevSite page:

  1. Go to https://fonts.google.com/icons (not go/icons).
  2. In the Search Material icons box, search for the icon you want.
  3. Click the icon to see usage information.
  4. Under the Icon font section of the usage information panel, copy the name of the icon from the second code block.

  5. Copy the following into your text to add the icon:

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

  6. To change the icon's color (or size, if necessary), use a style attribute.

Example

The following code produces the text "To view detail about a specific event, click the expander arrow."

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

You can use <i> instead of <span>. Both tags work; however, span is more semantically accurate—for example, for "Click Delete Delete," you can use the following code:

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

For every element with class="material-icons", DevSite adds the attributes aria-hidden="true" and translate="no". This ensures a better user experience for screen readers by removing unnecessary items from the accessibility tree, and keeps the name of the icon from being erroneously translated.

Button icons

When documenting a procedure that uses a button icon, add class="inline-icon" to the <img> tag. For more information, see the style guide for buttons and icons.

Example

The following code produces the text "Click Make Project."

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