Icon

This component enables you to show an icon.

Use cases:

• displaying a specified icon
• highlighting items in a listbox
• cell-renderers and many others

note

You can use any free publicly-available icon from fontawesome. These are available via the links below:

• solid/regular icons
• brand icons

Paying for fontawesome pro enables you to use all the fontawesome icons with this component.

Example

The example below displays three different icons.

React

Declaration

<rapid-icon></rapid-icon>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-icon name="house"></rapid-icon>
    <rapid-icon name="user" variant="regular"></rapid-icon>
    <rapid-icon name="github" variant="brand"></rapid-icon>
  `,
})
export class MyElement extends GenesisElement {
}

Genesis

Declaration

<Icon></Icon>

Usage

import { Icon } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {
  return (
    <Icon name="house"></Icon>
    <Icon name="user" variant="regular"></Icon>
    <Icon name="github" variant="brand"></Icon>
  );
}

Angular

Declaration

  <rapid-icon></rapid-icon>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
      <rapid-icon name="house"></rapid-icon>
      <rapid-icon name="user" variant="regular"></rapid-icon>
      <rapid-icon name="github" variant="brand"></rapid-icon>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

API

This table shows attribute binding examples for Genesis Component syntax. The HTML closing tag is not included.

Attributes

Name	Type	Description	Example
variant	"solid" | "regular" | "brand"	solid is the default, regular usually is slightly more finely drawn, brand is for brand icons only.	<rapid-icon variant="regular">
size	"2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x"	Controls the size of the icon. Default: "sm"	<rapid-icon size="xl">
name	string	The name of the icon (matching with the name in fontawesome).	<rapid-icon name="iconName">
error	boolean	Adds error styling to the icon when tooltip attribute is also set.	<rapid-icon error>
tooltip	string	The tooltip for the icon. If not set, there is no tooltip.	<rapid-icon tooltip="Icon tooltips">
tooltip-id	string	The tooltip id.	<rapid-icon tooltip-id="Tooltip_ID">

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

Name	Description
Default	The default slot for icon text, this contents will appear to the right of the icon.

Parts

Name	Description
i-icon	The i tag which is the fontawersome icon container.
icon-${x.name}-${x.size}-${x.variant}	The same i tag as i-icon. This part name is dynamic based on the rapid-icon attributes.
tooltip	The rapid tooltip, if the tooltip attribute is enabled.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.