BaseIcon

Mostra um ícone do Bootstrap Icons no tamanho certo da escala. Por padrão é decorativo; com label, passa a ter significado para o leitor de tela.

Uso

• Use o ícone ao lado de um texto para ajudar a reconhecer a ação ou o item. Ele reforça o texto, não o substitui.
• Ícone sozinho só quando o significado é universal (busca, fechar, editar). Nesse caso, dê label, ou use BaseButton com icon-only se ele dispara uma ação.
• Passe o nome do Bootstrap Icons sem o prefixo bi-: name="trash", não name="bi-trash".
• O ícone herda a cor do texto ao redor. Para mudar a cor ou o tamanho, mude a cor do elemento pai ou passe uma classe sua no BaseIcon: qualquer classe vence o estilo padrão.
• Dentro de BaseButton e BaseInput, use a propriedade icon ou icon-start deles: o componente já escolhe o tamanho.

Tamanhos

Pequeno · 16 px Médio · 20 px Grande · 24 px

Tamanho	Quando
sm (16 px)	Dentro de botões, campos, tabelas e texto corrido de 14 a 16 px
md (20 px)	Alertas, itens de menu e cabeçalhos de cartão
lg (24 px)	Títulos de seção e estados vazios

Decorativo ou com significado

Vitória, ES

No primeiro, o texto ao lado já diz tudo e o ícone fica escondido do leitor de tela. No segundo, o ícone está sozinho, o símbolo é universal e o label diz o que ele significa.

O label só chega a quem usa leitor de tela. Um ícone sozinho que não é universal, como um cadeado para "contrato bloqueado", precisa de texto visível ao lado ou de um BaseButton icon-only, que mostra a dica ao passar o mouse.

Estilo

Propriedade	Token
Tamanho	--tj-icon-sm/md/lg (16, 20, 24 px)
Cor	Herda a cor do texto (currentColor); nos componentes, --tj-icon-primary, --tj-icon-secondary ou --tj-icon-interactive

Código

<BaseIcon name="calendar3" size="sm" />
<BaseIcon name="check-circle-fill" label="Concluído" />

Propriedade	Tipo	Padrão	Descrição
name	string	—	Nome do ícone do Bootstrap Icons, sem bi- (obrigatório)
size	'sm' | 'md' | 'lg'	'md'	16, 20 ou 24 px
label	string	—	Nome acessível; sem ele o ícone é decorativo

Sem eventos. O ícone não é interativo: para uma ação, use BaseButton.

Acessibilidade

• Sem label, o ícone recebe aria-hidden="true" e o leitor de tela pula.
• Com label, recebe role="img" e aria-label, e o leitor de tela anuncia o nome como imagem.
• O ícone nunca é o único jeito de passar uma informação: situação também vai em texto, como no BaseBadge.
• Não entra na ordem do Tab, porque não é interativo.
• A cor vem do texto ao redor, então segue o tema claro, o escuro e o modo de alto contraste do sistema.
• Testado com axe com label dentro de um parágrafo e decorativo dentro de um BaseButton icon-only. label vazio ou só com espaços mantém o ícone decorativo.