Angular Icon Button Overview

    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

    To get started with the Ignite UI for Angular Icon Button directive, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

    ng add igniteui-angular

    For a complete introduction to the Ignite UI for Angular, read the getting started topic.

    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

    Analogically, we can switch to outlined type:

    <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>

    Size

    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.

    Angular Icon Button Styling

    Following the simplest approach, we use CSS variables to customize the appearance of the icon button:

    [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.

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.