📘
This is only applicable to the Meya Orb Web SDK and the Meya Orb Mobile SDK.

In Meya it is possible to specify the icon for the following UI elements:

Bot Avatar
Button
Quick Reply
Launcher
Page Header Title

An icon is defined in BFML using the icon spec, which has a number of fields that allow you to customize the icon. Here is the icon spec definition:

icon:
  url: STRING
  color: STRING
  path: STRING

In Python the icon spec is defined by the IconElementSpec class. This IconElementSpec class is used in other spec class definitions such as the AbstractButtonElementSpec to enable a custom icon.

Meya icons

Meya uses the Streamline icon set to enable custom icons that matches the Orb's design theme. Streamline offers hundreds of different icons that are also available in multiple variants such as light, regular, and bold.

Here is an example of a quick reply with a custom icon:

steps:
  - say: What would you like to do next?
    quick_replies:
      - text: Talk to an agent
        icon:
          color: "#ff0000"
          path: streamline-light/18-avatars/02-geometric-men-professions/professions-man-telecommunicator.svg

Icon path

Search Streamline icons.

Select the one you like from one of the following icon sets:
a. Streamline Bold
b. Streamline Light
c. Streamline Regular
Note the name of the icon.
Look up the nearest file path in this spreadsheet.

Use the icon path in the icon's path field. The Orb will resolve the specified icon path and download the icon from the Meya CDN.

Icon colors

You can specify the icon color by setting the color field in the icon spec. The takes a standard hex HTML code, for example "#ff0000" is red.

Note, put the hex color code in quotes, otherwise it will be interpreted as a YAML comment.

Only the following icon sets support custom colors:

Streamline Light
Streamline Regular

External icons

If the Streamline icon sets are not sufficient, then you can provide a URL to an icon file and the Meya Orb Web SDK will try download and render the image file.

If the Orb cannot download or render the provided icon file, then it will display a default placeholder icon.

Here is an example of an icon using a URL:

steps:
  - say: What would you like to do next?
    quick_replies:
      - text: Google search
        icon:
          url: https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg

Note, external icons must have the image/svg content type, otherwise it will not be rendered.

Icon colors

The color field might not be applied when specifying an external icon.