React Icon Button Overview
The Ignite UI for React Icon Button component allows developers to use registered icons as buttons in their application. It carries all features of the icon component but adds features from the button component as well.
React Icon Button Example
Usage
First, you need to the install the corresponding Ignite UI for React npm package by running the following command:
npm install igniteui-react
You will then need to import the IgrIconButton
, its necessary CSS, and register its module, like so:
import { IgrIconButtonModule, IgrIconButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrIconButtonModule.register();
<IgrIconButton name="thumb-up" collection="material"></IgrIconButton>
Examples
Variant
Similar to the regular button components, the icon button supports several variants - flat
(default), contained
, and outlined
; To change the icon button type set the variant
attribute of the icon button.
<IgrIconButton name="search" collection="contained"></IgrIconButton>
Size
The size of the button can be changed by utilizing the --ig-size
CSS variable to any of the three supported sizes: --ig-size-small
, --ig-size-medium
, --ig-size-large
(default).
<IgrIconButton name="thumb-up" size="medium"></IgrIconButton>
igc-icon-button {
--ig-size: var(--ig-size-medium);
}
Type
The icon button component will change its internal structure from <button>
to an <a>
type element when the href
attribute is set. In that case the icon button can be thought of as a regular link. Setting the href
attribute will allow you to also set the rel
, target
, and download
attributes of the icon button.
<IgrIconButton name="thumb-up" collection="material" href="https://duckduckgo.com" target="_blank">
</IgrIconButton>
Mirrored
Some icons need to look a little different when used in Right-to-Left(RTL) mode. For that reason we provide a mirrored
attribute that, when set, flips the icon button horizontally.
<IgrIconButton name="thumb-up" mirrored="true"></IgrIconButton>
Styling
The icon button component exposes two CSS parts - base
and icon
that allow you to style the wrapping element (<button>
or <a>
) and the wrapped <igc-icon>
element;
igc-icon-button::part(base) {
padding: 12px;
color: olive;
}
igc-icon-button::part(icon) {
--size: 32px;
}