Web Components Icon Button Overview

The Ignite UI for Web Components 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.

Web Components Icon Button Example

import { defineComponents, IgcIconButtonComponent, registerIconFromText } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './IconButtonSize.css';

defineComponents(IgcIconButtonComponent);
const thumbUpIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';

export class IconButtonSize {
    constructor() {
        registerIconFromText("thumb-up", thumbUpIcon, "material");
    }
}

new IconButtonSize();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Icon Button Sizing</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="sample">
                <igc-icon-button name="thumb-up" collection="material" variant="contained" class="small"></igc-icon-button>
                <igc-icon-button name="thumb-up" collection="material" variant="contained" class="medium"></igc-icon-button>
                <igc-icon-button name="thumb-up" collection="material" variant="contained" class="large"></igc-icon-button>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

.small {
    --ig-size: var(--ig-size-small);
}

.medium {
    --ig-size: var(--ig-size-medium);
}

.large {
    --ig-size: var(--ig-size-large);
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents
cmd

Before using the IgcIconButtonComponent, you need to register it as follows:

import { defineComponents, IgcIconButtonComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcIconButtonComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

The simplest way to start using the IgcIconButtonComponent is as follows:

<igc-icon-button name="thumb-up" collection="material"></igc-icon-button>
html

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.

import { defineComponents, IgcIconButtonComponent, registerIconFromText } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcIconButtonComponent);
const thumbUpIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';

export class IconButtonVariants {
    constructor() {
        registerIconFromText("thumb-up", thumbUpIcon, "material");
    }
}

new IconButtonVariants();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Icon Button Variants</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="sample">
                <igc-icon-button name="thumb-up" collection="material" variant="flat"></igc-icon-button>
                <igc-icon-button name="thumb-up" collection="material" variant="contained"></igc-icon-button>
                <igc-icon-button name="thumb-up" collection="material" variant="outlined"></igc-icon-button>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

<igc-icon-button name="search" variant="contained"></igc-icon-button>
html

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

import { defineComponents, IgcIconButtonComponent, registerIconFromText } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './IconButtonSize.css';

defineComponents(IgcIconButtonComponent);
const thumbUpIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';

export class IconButtonSize {
    constructor() {
        registerIconFromText("thumb-up", thumbUpIcon, "material");
    }
}

new IconButtonSize();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Icon Button Sizing</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="sample">
                <igc-icon-button name="thumb-up" collection="material" variant="contained" class="small"></igc-icon-button>
                <igc-icon-button name="thumb-up" collection="material" variant="contained" class="medium"></igc-icon-button>
                <igc-icon-button name="thumb-up" collection="material" variant="contained" class="large"></igc-icon-button>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

.small {
    --ig-size: var(--ig-size-small);
}

.medium {
    --ig-size: var(--ig-size-medium);
}

.large {
    --ig-size: var(--ig-size-large);
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-icon-button {
    --ig-size: var(--ig-size-medium);
}
css

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.

<igc-icon-button
  name="thumb-up"
  collection="material"
  href="https://duckduckgo.com"
  target="_blank">
</igc-icon-button>
html

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.

<igc-icon-button name="thumb-up" mirrored></igc-icon-button>
html

Styling

The IgcIconButtonComponent 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[variant="contained"]:not([disabled])::part(base) {
  padding: 12px;
  background-color: var(--ig-success-500);
}

igc-icon-button::part(icon) {
  --size: 22px;
  color: var(--ig-success-500-contrast);
}
css

import { defineComponents, IgcIconButtonComponent, registerIconFromText } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import "./IconButtonStyling.css";

defineComponents(IgcIconButtonComponent);
const thumbUpIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/></svg>';

export class IconButtonStyling {
    constructor() {
        registerIconFromText("thumb-up", thumbUpIcon, "material");
    }
}

new IconButtonStyling();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Icon Button Styling</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="sample">
                <igc-icon-button name="thumb-up" collection="material" variant="contained"></igc-icon-button>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html


igc-icon-button[variant=contained]:not([disabled])::part(base) {
    padding: 12px;
    color: olive;
    background-color: lightgray;
  }
  
  igc-icon-button::part(icon) {
    --size: 32px;
  }
  css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css