Iconografia
Os ícones são utilizados para substituir textos e promover um rápido entendimento de um recurso da interface. O design dos ícones é simples, amigável e minimalista, e utiliza convenções universais. Na Betha, adotamos a biblioteca Material Design Icons como fonte de ícones.
Quando utilizar
Os ícones não são ornamentos. Portanto, eles devem ser utilizados para esclarecer um objetivo, indicar ações e seções importantes, etc, sempre fazendo relação entre o texto e a imagem. Observe um exemplo em que a utilização de ícones é aplicável:
Como utilizar
É importante manter a consistência dos ícones e utilizar um padrão. Deste modo, a navegação ficará fluida e acessível. Recomenda-se o uso da propriedade title contendo um texto explicativo sobre o ícone. Isso facilita a identificação do recurso nos casos em que o usuário não está familiarizado com a imagem apresentada.
Mais utilizados
<i class="mdi mdi-trash-can-outline" title="Excluir"></i>
<i class="mdi mdi-plus" title="Adicionar"></i>
<i class="mdi mdi-account-outline" title="Usuário"></i>
<i class="mdi mdi-account-plus-outline" title="Adicionar usuário"></i>
<i class="mdi mdi-pencil-outline" title="Editar"></i>
<i class="mdi mdi-eye-outline" title="Visualizar"></i>
<i class="mdi mdi-eye-off-outline" title="Esconder"></i>
<i class="mdi mdi-download-outline" title="Download"></i>
<i class="mdi mdi-dots-vertical" title="Mais opções"></i>
<i class="mdi mdi-filter-outline" title="Filtrar"></i>
<i class="mdi mdi-calendar-blank-outline" title="Calendário"></i>
<i class="mdi mdi-clock-outline" title="Hora"></i>
<i class="mdi mdi-cog-outline" title="Configurações"></i>
<i class="mdi mdi-paperclip" title="Anexo"></i>
<i class="mdi mdi-check" title="Visualizado"></i>
Você pode encontrar mais ícones na biblioteca do Material Design Icons.