Visão geral do botão do ícone Angular
The Ignite UI for Angular Icon Button directive is intended to turn any icon into a fully functional button. The igxIconButton comes in three types - flat, outlined, and contained which is the default one.
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.
The next step is to import the IgxIconButtonDirective as a standalone dependency:
// 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 {}
Now that you have the Ignite UI for Angular Icon Button directive imported, you can start using the igxIconButton directive on elements.
Angular Icon Button Types
Flat Icon Button
Use the igxIconButton directive to add a simple flat icon button in your component template:
<button igxIconButton="flat">
<igx-icon>edit</igx-icon>
</button>
Contained Icon Button
All you have to do to create a contained icon button is to change the value of the igxIconButton property. Note that if you do not choose a type, by default it will also be set to 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
If you want to disable an icon button, you can use the disabled property. In this sample we also demonstrate how to use icons from different families with the igxIconButton directive:
<button igxIconButton="flat" disabled>
<igx-icon family="fa" name="fa-home"></igx-icon>
</button>
SVG Icons
In addition to material icons, the igxIconButton directive also supports usage of SVG images as icons. To do so, first we should inject the IgxIconService dependency and then use the addSvgIcon method to import the SVG file in cache. For further information, you can read the SVG section in the icon topic.
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
Users can choose one of the three predefined igxIconButton sizes by using the --ig-size custom CSS property. By default, the size of the component is set medium.
As you can see from the sample above, we can also use the igxIconButton directive to turn elements like span and div into Ignite UI for Angular styled icon buttons.
Icon Button Styling
Icon Button Theme Property Map
Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente:
Flat Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground | $hover-primeiro plano | Hovered icon color |
| $focus-primeiro plano | Focused icon color | |
| $focus-pairar-primeiro plano | Focus + hover icon color | |
| $active-primeiro plano | Active icon color | |
| $hover-contexto | Background on hover | |
| $focus-contexto | Background on focus | |
| $focus-hover-background | Background on focus + hover | |
| $active-contexto | Background on active |
Contained Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background | $foreground | Icon color |
| $hover-contexto | Background on hover | |
| $focus-contexto | Background on focus | |
| $focus-primeiro plano | Focused icon color | |
| $focus-hover-background | Background on focus + hover | |
| $active-contexto | Background on active | |
| $hover-primeiro plano | Hovered icon color | |
| $focus-pairar-primeiro plano | Focus + hover icon color | |
| $active-primeiro plano | Active icon color | |
| $shadow cor | Shadow on focus | |
| $focus-cor da borda | Cor da borda de foco | |
| $disabled-contexto | Disabled background | |
| $disabled em primeiro plano | Cor do ícone desativada |
Outlined Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground | $hover-primeiro plano | Hovered icon color |
| $focus-primeiro plano | Focused icon color | |
| $focus-pairar-primeiro plano | Focus + hover icon color | |
| $active-primeiro plano | Active icon color | |
| $hover-contexto | Background on hover | |
| $focus-contexto | Background on focus | |
| $focus-hover-background | Background on focus + hover | |
| $active-contexto | Background on active | |
| $border cor | Default border color | |
| $focus-cor da borda | Cor da borda de foco |
Flat Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground | $hover-primeiro plano | Cor do ícone ao passar o mouse |
| $focus-primeiro plano | Icon color when focused | |
| $focus-pairar-primeiro plano | Icon color when focused and hovered | |
| $active-primeiro plano | Icon color when active | |
| $hover-contexto | Background color on hover | |
| $focus-contexto | Background color on focus | |
| $focus-hover-background | Background color on focus and hover | |
| $active-contexto | Background color when active |
Contained Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background | $foreground | Icon color |
| $hover-contexto | Background color on hover | |
| $focus-contexto | Background color on focus | |
| $focus-primeiro plano | Icon color when focused | |
| $focus-hover-background | Background color on focus and hover | |
| $active-contexto | Background color when active | |
| $hover-primeiro plano | Cor do ícone ao passar o mouse | |
| $focus-pairar-primeiro plano | Icon color when focused and hovered | |
| $active-primeiro plano | Icon color when active | |
| $shadow cor | Shadow color on focus | |
| $focus-cor da borda | Border color on focus | |
| $disabled-contexto | Background color when disabled | |
| $disabled em primeiro plano | Icon color when disabled |
Outlined Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground | $hover-primeiro plano | Cor do ícone ao passar o mouse |
| $focus-primeiro plano | Icon color when focused | |
| $focus-pairar-primeiro plano | Icon color when focused and hovered | |
| $active-primeiro plano | Icon color when active | |
| $hover-contexto | Background color on hover | |
| $focus-contexto | Background color on focus | |
| $focus-hover-background | Background color on focus and hover | |
| $active-contexto | Background color when active | |
| $border cor | Border color | |
| $focus-cor da borda | Border color on focus |
Flat Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground | $hover-primeiro plano | Icon color when hovered |
| $focus-primeiro plano | Icon color when focused | |
| $focus-pairar-primeiro plano | Icon color when focused and hovered | |
| $active-primeiro plano | Icon color when active | |
| $disabled em primeiro plano | Icon color when disabled | |
| $shadow cor | The shadow color of the icon button |
Contained Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background | $foreground | Icon color |
| $hover-contexto | Background color on hover | |
| $focus-contexto | Background color on focus | |
| $focus-primeiro plano | Icon color when focused | |
| $focus-hover-background | Background color on focus and hover | |
| $active-contexto | Background color when active | |
| $hover-primeiro plano | Cor do ícone ao passar o mouse | |
| $focus-pairar-primeiro plano | Icon color when focused and hovered | |
| $active-primeiro plano | Icon color when active | |
| $shadow cor | Cor das sombras | |
| $focus-cor da borda | Border color on focus | |
| $disabled-contexto | Background color when disabled | |
| $disabled em primeiro plano | Icon color when disabled |
Outlined Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground | $hover-primeiro plano | Cor do ícone ao passar o mouse |
| $focus-primeiro plano | Icon color when focused | |
| $focus-pairar-primeiro plano | Icon color when focused and hovered | |
| $active-primeiro plano | Icon color when active | |
| $hover-contexto | Background color on hover | |
| $focus-contexto | Background color on focus | |
| $focus-hover-background | Background color on focus and hover | |
| $active-contexto | Background color when active | |
| $border cor | Border color | |
| $focus-cor da borda | Border color on focus | |
| $shadow cor | Cor das sombras | |
| $disabled em primeiro plano | Icon color when disabled | |
| $disabled-cor-borda | The border of the icon button when disabled |
Flat Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground | $hover-primeiro plano | Cor do ícone ao passar o mouse |
| $focus-primeiro plano | Icon color when focused | |
| $focus-pairar-primeiro plano | Icon color when focused and hovered | |
| $active-primeiro plano | Icon color when active | |
| $disabled em primeiro plano | Icon color when disabled | |
| $hover-contexto | Background color on hover | |
| $focus-contexto | Background color on focus | |
| $focus-hover-background | Background color on focus and hover | |
| $active-contexto | Background color when active | |
| $focus-cor da borda | Border color on focus |
Contained Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$background | $foreground | Icon color |
| $hover-contexto | Background color on hover | |
| $focus-contexto | Background color on focus | |
| $focus-primeiro plano | Icon color when focused | |
| $focus-hover-background | Background color on focus and hover | |
| $active-contexto | Background color when active | |
| $hover-primeiro plano | Cor do ícone ao passar o mouse | |
| $focus-pairar-primeiro plano | Icon color when focused and hovered | |
| $active-primeiro plano | Icon color when active | |
| $shadow cor | Cor das sombras | |
| $focus-cor da borda | Border color on focus | |
| $disabled-contexto | Background color when disabled | |
| $disabled em primeiro plano | Icon color when disabled |
Outlined Icon Button
| Propriedade primária | Propriedade dependente | Descrição |
|---|---|---|
$foreground | $hover-primeiro plano | Cor do ícone ao passar o mouse |
| $focus-primeiro plano | Icon color when focused | |
| $focus-pairar-primeiro plano | Icon color when focused and hovered | |
| $active-primeiro plano | Icon color when active | |
| $hover-contexto | Background color on hover | |
| $border cor | Border color | |
| $focus-cor da borda | Border color on focus |
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;
}
Take a look at the icon-button-theme section for a complete list of available parameters for styling any type of icon button.
You can also choose to style only buttons of a specific type - flat, outlined or contained.
To do this, you can use the new type-specific theme functions: flat-icon-button-theme, outlined-icon-button-theme and contained-icon-button-theme
Here’s an example of using the contained-icon-button-theme function to define a custom theme in SCSS:
@use "igniteui-angular/theming" as *;
$custom-contained: contained-icon-button-theme(
$background: #ECAA53,
);
This will generate a fully themed contained icon button, including appropriate foreground and background colors for its various states like hover, focus, and active.
Styling with Tailwind
You can style the icon button using our custom Tailwind utility classes. Make sure to set up Tailwind first.
Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
The utility file includes both light and dark theme variants.
- Use
light-*classes for the light theme. - Use
dark-*classes for the dark theme. - Append the component name after the prefix, e.g.,
light-icon-button,dark-icon-button.
Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).
You can find the full list of properties in the icon-button-theme. The syntax is as follows:
<button igxIconButton class="!light-icon-button ![--icon-color:#FF4E00]">
<igx-icon>edit</igx-icon>
</button>
Note
The exclamation mark(!) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.
At the end your icon buttons should look like this:
API References
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub