Configurações de ícone

Selecao de icone

Ponto principal:
Escolhe qual icone sera exibido.

O que esta configuracao muda:
Ajuda a comunicar a acao do botao mais rapidamente.

Dica de ajuste:
Use icones que reforcem o texto, sem redundancia excessiva ou contradicao.

Itens de configuracao

• Selecao de icone: define o icone exibido.
• Cor do icone (na UI de selecao): ajusta a cor para combinar com texto/fundo.
• Espessura do traco (icones de linha): ajusta a largura do traco; valor padrao 1.75; com 0, usa a largura original do icone.
• Responsivo: permite icones diferentes por dispositivo.

Observacao:
Tambem e possivel usar um icone diferente no hover, inclusive por dispositivo.

Quando o icone nao e renderizado:
Se nao houver icone selecionado e o tamanho da moldura for 0, a area de icone nao e emitida no HTML (nao aparece no DOM). Se a moldura tiver tamanho/cor definidos, apenas a moldura aparece.

Otimizacao responsiva:
Por padrao, somente o icone de PC e renderizado. Para usar icones diferentes em MD/TB/SP, ative Responsivo. A troca entre icones responsivos usa display: none/flex, portanto nao ha fade nessa troca.

Cor do icone

Ponto principal:
Define a cor do icone.

O que esta configuracao muda:
Cor forte demais gera ruido; fraca demais perde presenca.

Dica de ajuste:
Comece com a mesma cor do texto e use cor de destaque apenas quando necessario.

Itens de configuracao

• Color: define a cor do icone.
• Alpha: ajusta transparencia do icone.
• Responsivo: permite valores diferentes por dispositivo.

Tamanho do icone

Ponto principal:
Define o tamanho do icone.

O que esta configuracao muda:
Tamanho inadequado desequilibra o centro visual do botao.

Dica de ajuste:
Comece entre 0.9x e 1.2x do tamanho do texto principal.

Itens de configuracao

• Valor de tamanho: define o tamanho do icone.
• Unidade (px / em / rem): escolhe comportamento fixo ou relativo.
• Responsivo: permite valores diferentes por dispositivo.

Observacao:
O tamanho no hover tambem pode ser configurado separadamente. Em em, o icone acompanha o tamanho de fonte e preserva melhor proporcao com o texto.

Posicao do icone

Ponto principal:
Define posicao e deslocamento do icone.

O que esta configuracao muda:
Afeta distancia para o texto e equilibrio geral do botao.

Dica de ajuste:
Use centro como base e ajuste X/Y em pequenas etapas.

Itens de configuracao

• X Position (left / center / right + valor): ajusta posicao horizontal.
• Y Position (top / center / bottom + valor): ajusta posicao vertical.
• Unidade (px / % / vw): define como o deslocamento reage ao layout.
• Responsivo: permite valores diferentes por dispositivo.

Moldura do icone

Ponto principal:
Define a moldura de fundo do icone.

O que esta configuracao muda:
Destaca o icone como elemento visual independente.

Dica de ajuste:
Se reforcar muito a moldura, reduza um nivel de decoracao no botao principal.

Itens de configuracao

• Tamanho > Set Width and Height Individually: separa largura e altura.
• Tamanho > Tamanho unico + unidade: ajusta moldura quadrada de forma rapida.
• Tamanho > Width / Height individuais + unidade: ajuste fino do formato.
• Tamanho > Responsivo: dimensoes por dispositivo.
• Cor > Background Color: define cor de fundo da moldura.
• Cor > Alpha: define transparencia da cor de fundo.
• Cor > Gradient: usa gradiente na moldura.
• Cor > Responsivo: ajustes de cor por dispositivo.
• Borda > Display Position (T/R/B/L): define quais lados mostram borda.
• Borda > Style: tipo de linha da borda.
• Borda > Color + Alpha: cor e transparencia da borda.
• Borda > Size: espessura da borda.
• Borda > Responsivo: ajuste de borda por dispositivo.
• Raio > Radius: arredondamento da moldura.
• Raio > Unidade (px / %): unidade do arredondamento.
• Raio > Responsivo: raio por dispositivo.
• Transition > Duration / Delay / Easing / Custom Value / Reset: velocidade da mudanca da moldura no hover.

Observacao:
A moldura tambem pode ter estado hover proprio. A transicao da moldura e independente da transicao do icone.

Transition

Ponto principal:
Define a velocidade da mudanca entre estado normal e hover.

O que esta configuracao muda:
Controla a percepcao de resposta ao passar o mouse.

Dica de ajuste:
Use Duration 200-350ms como base e refine com delay/easing apenas se necessario.

Itens de configuracao

• Duration (ms): tempo total da transicao.
• Delay (ms): espera antes de iniciar a transicao.
• Easing: curva de velocidade da transicao.
• Custom Value: valor personalizado (CSS cubic-bezier).
• Reset: restaura os valores desta secao.

Observacao:
Esta transicao vale para cor, tamanho e posicao do icone. Transicao de moldura e animacao de icone sao configuracoes separadas.