@terminus/ui-icon-button v4.0.0

Table of Contents

• Installation
  • Packages that need to be installed
  • Modules that need to be in NgModule
  • CSS imports
• Usage
  • Theme
  • Accessibility

Installation

Packages that need to be installed

• @angular/material
• @terminus/design-tokens
• @terminus/fe-utilities
• @terminus/ui-icon
• @terminus/ui-icon-button
• @terminus/ui-utilities

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-icon-button

Modules that need to be in NgModule

• TsIconButtonModule

CSS imports

In your top level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

Usage

Pass a valid FontAwesome icon reference:

import { faHome } from '@fortawesome/pro-solid-svg-icons/faHome';
...
public home = faHome;

<ts-icon-button
  [icon]="home"
  (clicked)="myMethod()"
></ts-icon-button>

Theme

Use the theme parameter to change the color.

<!-- Will be colored with the 'primary' color -->
<ts-icon-button theme="primary">forum</ts-icon-button>

<!-- Will be colored with the 'accent' color -->
<ts-icon-button theme="accent">forum</ts-icon-button>

<!-- Will be colored with the 'warn' color -->
<ts-icon-button theme="warn">forum</ts-icon-button>

By default the icon will use the library base text color.

Accessibility

For accessibility purposes we should set the actionName and buttonType.

1. actionName can be one of the TsButtonActionTypes and will be used for the aria-label.
2. buttonType can be one of the TsButtonFunctionTypes and will be used for the type attribute.

<ts-icon-button
  actionName="Menu"
  buttonType="button"
  (clicked)="myMethod()"
>bookmark</ts-icon-button>