Icon Field

The Icon field turns all images in a specified folder and its sub-folders into an icon library to be used for your content. This works best, if the folder contains only SVGs or PNGs with transparency.

Editing UI Widget

This field is displayed as an icon picker field labelled with the field’s label in the Content Editor. It will show the currently selected icon as well as either a path, a template or the prettified icon name, depending on the options of the field. Clicking the icon picker will allow users to visually choose from all icons identified within the chosen source folder and all its sub-folders.

Output Format

The Icon field outputs either the file path or a user-defined URL for the chosen icon as a string.

Options

The following options are available for this field (default values shown):

{
  "sourceDir": "",
  "insertAs": "filepath",
  "urlTemplate": "",
  "preserveColor": false,
  "prettyFilenames": false,
  "removable": false
}

• sourceDir: a path to a folder in the repository containing image files. All files in this directory as well as any nested sub-directories will be shown as a flat list with a small preview of the icon

• insertAs: can be set to either filepath or template to control how the picked icon will be inserted into the content

• urlTemplate: if insertAs is set to 'template', this defines the URL template to be used for inserting the field value. A template of icon/:filename for example, would cause an menu.svg file to be inserted as icon/menu

• preserveColor: in order to support both light and dark modes, icons are set as masks. Setting this option to true sets them as background images instead, preserving the colour. You should also activate this option if your icon files don’t have any transparency.

• prettyFilenames: with this option set to true, the icon picker will show just the file name of the selected icon in the Mattrbld UI while still storing the appropriate value according to insertAs in the content

• removable: whether or not the value of the field should be removable after being set

Validation

The following validation options are available for this field (default values shown):

{
  "required": false
}

Notes

This field is specifically meant for inserting references to icons, please refer to the Image field if you’re interested in adding arbitrary images to your content.

Version History

• Version at launch: 1