Use the built-in icon library

The C3 UI Framework integrates the FontAwesome icon library. FontAwesome provides a large collection of scalable vector icons that you can easily style and include in your application. To use these icons in the C3 UI Framework, prefix the icon name with c3-icon- and apply it as a CSS class.

Copy link to this section

Get the classname for an icon

Follow these steps to determine the correct classname:

1. Visit the FontAwesome Website: Open the FontAwesome website to browse available icons.
2. Search for Icons: Enter keywords in the search bar or explore categories to find a relevant icon.
3. Select an Icon: Click on the desired icon to view its detail page.
4. Copy the Icon Name: Find the icon’s name on the detail page. Ignore the full fa- classname; copy only the base icon name.
5. Create the C3 Classname: Add the c3-icon- prefix to the icon name. For example, convert the FontAwesome home icon into c3-icon-home.

Copy link to this section

Use icons in declarative components

Declarative components automatically prepend c3-icon- to any icon name you provide. You only need to pass the raw icon name through the iconSuffix property. For example, the following configuration uses the search icon in a UiSdlPageTitle component:

{
  "type": "UiSdlConnected<UiSdlPageTitle>",
  "component": {
    "title": "PageTitle",
    "actionGroup": {
      "actions": [
        {
          "name": "Search",
          "actionSuffix": "SEARCH",
          "iconSuffix": "search",
          "usage": "primary"
        }
      ]
    }
  }
}

Copy link to this section

Use icons in custom components

When building a custom component, add the c3-icon- prefix yourself. The following example shows a custom button that renders an icon and label. The icon name may come from a .c3typ file, an enum, or a default value.

const CustomButton = ({ button, height }) => {
  const translate = useTranslate();
  const labelText = translate({ spec: button.label });
  const icon = <div className={classNames('icon', 'c3-icon', `c3-icon-${button.iconName}`)} />;
  const label = <p className={classNames(height?.toLowerCase(), 'c3-segmented-button-text')}>{labelText}</p>;
  return (
    <div className="c3-icon-with-text-container">
      {icon}
      {label}
    </div>
  );
};

Copy link to this section

FontAwesome version

The framework uses FontAwesome Pro v6.2.1. You can find the SCSS and webfont files in the following directory: cssLibrary/src/stylesheets/vendor/fontawesome-pro-6.2.1-web