Visão geral do botão do ícone Angular

    A diretiva Ignite UI for Angular Icon Button destina-se a transformar qualquer ícone em um botão totalmente funcional. O igxIconButton vem em três tipos - plano, delineado e contido, que é o padrão.

    Angular Icon Button Example

    Getting Started with Ignite UI for Angular Icon Button

    Para começar a usar a diretiva Ignite UI for Angular Icon Button, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    A próxima etapa é importar o IgxIconButtonDirective como uma dependência independente:

    // home.component.ts

...
import { IgxIconButtonDirective } from 'igniteui-angular';
// import { IgxIconButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
        <button igxIconButton="outlined">
            <igx-icon>home</igx-icon>
        </button>`,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxIconButtonDirective]
})
export class HomeComponent {}

    Agora que você importou a diretiva Ignite UI for Angular Icon Button, pode começar a usar a igxIconButton diretiva em elementos.

    Angular Icon Button Types

    Flat Icon Button

    Use a igxIconButton diretiva para adicionar um botão de ícone simples e plano ao modelo de componente:

    <button igxIconButton="flat">
    <igx-icon>edit</igx-icon>
</button>

    Contained Icon Button

    Tudo o que você precisa fazer para criar um botão de ícone contido é alterar o valor da igxIconButton propriedade. Observe que, se você não escolher um tipo, por padrão, ele também será definido como contained.

    <button igxIconButton>
    <igx-icon>favorite</igx-icon>
</button>

    Outlined Icon Button

    Analogicamente, podemos mudar para o tipo de contorno:

    <button igxIconButton="outlined">
    <igx-icon>more_vert</igx-icon>
</button>

    Examples

    Disabled Icon Button

    Se você quiser desabilitar um botão de ícone, poderá usar a disabled propriedade. Neste exemplo, também demonstramos como usar ícones de diferentes famílias com a igxIconButton diretiva:

    <button igxIconButton="flat" disabled>
    <igx-icon family="fa" name="fa-home"></igx-icon>
</button>

    SVG Icons

    Além dos ícones de materiais, a diretiva também suporta o igxIconButton uso de imagens SVG como ícones. Para fazer isso, primeiro devemos injetar a IgxIconService dependência e, em seguida, usar o addSvgIcon método para importar o arquivo SVG no cache. Para obter mais informações, você pode ler a seção SVG no tópico do ícone.

    constructor(private _iconService: IgxIconService) { }

public ngOnInit() {
    // register custom SVG icon
    this._iconService.addSvgIcon('rain', 'assets/images/card/icons/rain.svg', 'weather-icons');
}

    <button igxIconButton>
    <igx-icon family="weather-icons" name="rain"></igx-icon>
</button>

    Tamanho

    Os usuários podem escolher um dos três tamanhos predefinidos igxIconButton usando a--ig-size propriedade CSS personalizada. Por padrão, o tamanho do componente é definido como médio.

    Como você pode ver no exemplo acima, também podemos usar a igxIconButton diretiva para transformar elementos como span e div em botões de ícone com estilo Ignite UI for Angular.

    Icon Button Styling

    Seguindo a abordagem mais simples, usamos variáveis CSS para personalizar a aparência do botão de ícone:

    [igxIconButton="contained"] {
  --background: #011627;
  --foreground: #fefefe;
  --hover-foreground: #011627dc;
  --hover-background: #ecaa53;
  --focus-foreground: #011627dc;
  --focus-background: #ecaa53;
  --focus-border-color: #0116276c;
  --active-foreground: #011627dc;
  --active-background: #ecaa53;
}

    Dê uma olhada na icon-button-theme seção para obter uma lista completa de parâmetros disponíveis para estilizar qualquer tipo de botão de ícone.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.