Skip to content

Icon component

An icon is a single graphic that displays an icon from the Carbon icon library or an image from the /Profile/Images directory.

A small grey car icon with a signal-bars symbol above its roof.

Icon component displaying an icon from the Profile Images directory

Use an icon to display a graphic, a status indicator, or another visual element. Use Actions when the icon must be a button, and the image parameter of the component that holds it, such as an action or a Pill icon, when an icon is needed inside another component.

Parameters

Parameter Type Required Default Description
class string No None Rarely needed. The value is used only when image fails to resolve to an icon, and it is not a general styling class
image string Yes None Icon name such as BatteryCharging, or the filename of an image in the /Profile/Images directory. Older names such as nav_motorcontrollers_active.svg still resolve, and map to the Carbon icon SysProvision
recess boolean No false When true, the icon is displayed in a recessed (inset) frame at a larger size
bind array No None Data binding. Only the value target is handled, and the value is limited to the range 0 to 1. The value has no visible effect on an icon that is drawn from image

id, label, enabled, and visible are accepted but have no effect.

A bound value is limited to the range 0 to 1. A value below 0 is treated as 0, and a value above 1 as 1, after any gain and offset are applied.

A name that matches no known icon is loaded as an image file, so a misspelt icon name does not show the icon. The icon control in the inspector shows Choose Icon and lists the Carbon icon names and the images stored in the profile.

Example

A basic icon with recess turned off:

dashboard:
  items:
    - row:
        items:
          - icon:
              image: SysProvision
              recess: false

A Carbon icon by name:

dashboard:
  items:
    - row:
        items:
          - icon:
              image: BatteryCharging

An image that is not a known icon is loaded from the /Profile/Images directory, where you upload it through the profile's image library. See Store dashboard files in a profile. For example:

dashboard:
  items:
    - row:
        items:
          - icon:
              image: custom-logo.png

Recessed icons appear inset in a larger frame:

dashboard:
  items:
    - row:
        items:
          - icon:
              image: SysProvision
              recess: true