Icon

Visão Geral

O componente br-icon fornece uma maneira flexível e dinâmica de incorporar ícones nas aplicações. Utilizando a biblioteca Iconify, ele permite o uso de uma ampla variedade de ícones.

Com opções para especificar a altura e largura, adicionar classes CSS personalizadas, e definir como o ícone deve ser rotacionado ou espelhado, o br-icon oferece aos desenvolvedores as ferramentas necessárias para integrar ícones de forma consistente com o estilo e design de suas aplicações, melhorando a experiência do usuário e a clareza das interfaces.

Para mais informações sobre quais ícones estão disponíveis, consulte a documentação do Iconify.

Exemplos

Básico

Carregando exemplo

Código fonte editável

Formatar código

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Propriedades

cssClasses

Atributo	css-classes
Descrição	Permite adicionar classes CSS adicionais ao ícone. Use esta propriedade para aplicar estilos personalizados ao ícone, além dos estilos padrão.
Tipo	string
Valor padrão	---

customId

Atributo	custom-id
Descrição	Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId.
Tipo	string
Valor padrão	Helpers.generateUniqueId()

flip

Atributo	flip
Descrição	Define o tipo de espelhamento do ícone.
Tipo	"horizontal" | "vertical"
Valor padrão	---

height

Atributo	height
Descrição	Define a altura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc. O valor padrão é '16'.
Tipo	string
Valor padrão	'16'

iconName

Atributo	icon-name
Descrição	Nome do ícone a ser exibido, utilizando a biblioteca Iconify. Este nome deve corresponder ao nome do ícone definido na biblioteca para que ele seja exibido corretamente. (obrigatório)
Tipo	string
Valor padrão	---

isFocusable

Atributo	is-focusable
Descrição	Determina se o ícone pode receber foco. Se definido como verdadeiro, o ícone pode ser navegado usando Tab. O valor padrão é false.
Tipo	boolean
Valor padrão	false

isInline

Atributo	is-inline
Descrição	Exibe o rótulo e o controle na mesma linha. > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam isInline.
Tipo	boolean
Valor padrão	false

lazy

Atributo	lazy
Descrição	Controla o comportamento de carregamento do ícone através do observer interno do Iconify. Comportamento: - Padrão (propriedade não definida): carregamento imediato aplicando noobserver para evitar problemas de layout shift - lazy={true}: ativa o observer para carregamento lazy otimizado (útil em documentos longos com muitos ícones) - lazy={false}: carregamento imediato aplicando noobserver (mesmo comportamento do padrão) Nota: O padrão foi alterado para carregamento imediato para resolver problemas de deslocamento de layout que ocorriam quando ícones eram carregados depois do conteúdo inicial.
Tipo	boolean
Valor padrão	---

rotate

Atributo	rotate
Descrição	Define o ângulo de rotação do ícone.
Tipo	"180deg" | "270deg" | "90deg"
Valor padrão	---

width

Atributo	width
Descrição	Define a largura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc. O valor padrão é '24'.
Tipo	string
Valor padrão	'24'

CSS Shadow Parts

Nome	Descrição
"icon"	Elemento iconify-icon interno.

Dependências

Usado por

• br-avatar
• br-breadcrumb
• br-carousel
• br-collapse
• br-cookiebar
• br-cookiebar-group
• br-cookiebar-link
• br-cookiebar-note-group
• br-date-picker
• br-datetime-input
• br-footer-social
• br-header
• br-header-function
• br-header-list
• br-input
• br-menu
• br-menu-header
• br-menu-item
• br-menu-link
• br-menu-social
• br-message
• br-modal
• br-notification-header
• br-pagination
• br-select
• br-sign-in
• br-step-item
• br-tab
• br-tag
• br-time-picker
• br-tooltip
• br-upload

Gráfico