Ícones

A base de ícones do sistema é o Lucide. O mds-styles (HTML puro) importa e usa os ícones do Lucide diretamente, pelo nome original em inglês (ex.: chevron-down).

O mds-angular adiciona uma camada de alias semântico: em vez de referenciar o ícone pelo nome do Lucide, o componente <mds-icon> (e o input icon de mds-button e outros componentes) recebe um alias em português (ex.: editar, excluir, cadastrar). Isso padroniza qual ícone representa qual ação em todo o sistema e permite trocar o ícone por trás de um alias — numa reformulação visual, por exemplo — sem precisar caçar e trocar o uso em cada tela.

Galeria de aliases

Lista ao vivo de todo alias disponível e o ícone Lucide correspondente — a mesma vitrine usada para conferir/escolher um alias na hora de implementar uma tela:

Vitrine de Aliases (Todos os Ícones) — mds-angular ↗

Como usar (API do componente)

Componente Icon — API ↗

De onde vem o mapeamento

O alias de cada ícone não é decidido no código — vem de uma planilha Google mantida pelo time de design, com uma linha por ícone e as colunas Estilo, Ícone, Rótulo, Alias e Lucide (o nome real no Lucide).

Pipeline (dentro do mds-angular, não deste repo):

Planilha Google (fonte)
   ↓
scripts/generateIconsMap.js   — lê a planilha (Google Sheets API + service account)
   ↓
   ├─► projects/components/icon/icon-map.json      (alias -> ícone Lucide)
   ├─► projects/components/icon/icon-library.ts     (imports do lucide-angular)
   └─► projects/components/icon/icon.type.ts        (union type MdsIconAlias)

Adicionar/renomear um alias: edite a planilha, depois rode npm run iconsMap na raiz do mds-angular (precisa das credenciais em .google_config/) e confira o diff dos três arquivos gerados antes de commitar.
Nunca edite icon-map.json/icon-library.ts/icon.type.ts à mão — são sobrescritos no próximo npm run iconsMap, igual aos arquivos gerados deste site.
Ao implementar uma tela (código ou IA), use sempre um alias já existente na galeria acima — nunca um nome de ícone do Lucide direto no mds-angular.