Icones
O CANTA. Design System usa Google Material Symbols Rounded como biblioteca de icones. Estilo Rounded com peso 200 para manter a estetica leve e moderna.
Configuracao
Material Symbols Rounded com variable font settings customizados para o CANTA. Design System.
| Parametro | Valor | Descricao |
|---|---|---|
| Family | Material Symbols Rounded |
Estilo arredondado (nao Outlined/Sharp) |
| Weight (wght) | 200 |
Peso leve, tracos finos |
| Grade (GRAD) | 0 |
Sem ajuste de grade |
| Fill (FILL) | 0 |
Outline (sem preenchimento) |
| Optical Size (opsz) | 24 |
Otimizado para 24px |
.material-symbols-rounded {
font-variation-settings:
'FILL' 0,
'wght' 200,
'GRAD' 0,
'opsz' 24;
}Instalacao
Inclua o Google Fonts no head do documento para carregar os icones.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet"><span class="material-symbols-rounded">home</span>
<span class="material-symbols-rounded">search</span>
<span class="material-symbols-rounded">settings</span>Tamanhos
3 tamanhos padrao para uso consistente no sistema.
.canta-icon--sm {
font-size: 16px;
font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 20;
}
.canta-icon--md {
font-size: 20px;
font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 20;
}
.canta-icon--lg {
font-size: 24px;
font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}Variante Filled
A classe .canta-icon--filled ativa o preenchimento do icone. Use para indicar estado ativo ou selecionado.
.canta-icon--filled {
font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}
// HTML
<span class="material-symbols-rounded canta-icon--filled">favorite</span>Icones Comuns
Icones mais utilizados no CANTA. Design System. Consulte fonts.google.com/icons para o catalogo completo.