Você pode adicionar ícones a qualquer texto em uma página do DevSite usando a fonte de ícones do Material Design pré-carregada . Também é possível usar ícones de botão ao se referir a um botão.
Ícones do Material Design
Para adicionar um ícone do Material Design inline com seu texto em uma página do DevSite:
- Acesse https://fonts.google.com/icons (não go/icons).
- Na caixa Search Material icons , pesquise o ícone que você quer.
- Clique no ícone para conferir as informações de uso.
- Na seção "Fonte do ícone" do painel de informações de uso, copie o nome do ícone do segundo bloco de código.
Copie o seguinte no texto para adicionar o ícone:
<span class="material-icons">ICON_NAME</span>Para mudar a cor (ou o tamanho, se necessário) do ícone, use um atributo
style.
Exemplo
O código a seguir produz o texto "Para ver detalhes sobre um evento específico, clique na seta de expansão ".
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
Use <i> em vez de <span>. Ambas as tags funcionam, mas a span é mais precisa semanticamente. Por exemplo, para "Clique em delete Excluir Excluir", use o seguinte código:
Click <i class="material-icons">delete</i> <b>Delete</b>.
Para cada elemento com class="material-icons", o DevSite adiciona os atributos aria-hidden="true" e translate="no". Isso garante uma melhor experiência do usuário para leitores de tela, removendo itens desnecessários da árvore de acessibilidade e evita que o nome do ícone seja traduzido incorretamente.
Ícones de botão
Ao documentar um procedimento que usa um ícone de botão, adicione class="inline-icon" à tag <img>. Para mais informações, consulte o guia de estilo para botões e ícones.
Exemplo
O código a seguir produz o texto "Clique em 
Criar projeto".
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.