Icon

Use cases:

• Displaying a specified icon.
• An addition to presenting a listbox-option
• 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 will enable the use of all icons via this component also.

Example

Genesis

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

React

Declaration

  <rapid-icon></rapid-icon>

Usage

export function MyComponent() {
  return (
    <rapid-icon name="house"></rapid-icon>
    <rapid-icon name="user" variant="regular"></rapid-icon>
    <rapid-icon name="github" variant="brand"></rapid-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

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

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

This component doesn't have any slots.

Parts

This component doesn't have any parts,

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.