Icon

📘 Developer Guide

With the Icon Brick, you can easily add icons to your dashboards.
Either use the Icon Picker in the right Side-Nav to choose your icon, or directly edit the configuration of the brick.

🔁 Example

Designer

Runtime

⚙️ Configuration Properties

Key	Label	Description	Default Value
`id`	ID of the Icon	Can be selected using CSS via `#flyze-icon-id` `string` `UUID`	`Random UUID`
`version`	Decider for the version of the Icon	Always use `modern`, since legacy will be removed in the future. It just exists for backward compatibility `modern` `legacy`	`legacy`
`size` *	The size of the Icon	Defines the size of the Icon. Use `custom` to create your own sizes. `xsmall` \| `small` \| `default` \| `medium` \| `large` \| `xlarge` \| `custom`	`default`
`iconCategory`	The Icon Category	e.g. `social` Explore all available categories `string`	-
`iconName`	The Icon Name	e.g. `eco` Explore all available icons `string`	-
`customSizeName`	The custom size attribute name	e.g. `massive` Lets you create your own custom size. You can target via CSS with `[size="massive"]` `string`	-
`customStateName`	The custom state attribute name	e.g. `insane` Lets you create your own custom state. You can target via CSS with `[state="insane"]` `string`	-
`customSvg`	A custom SVG string	Lets you include your own custom SVG. `string`	-

🎨 CSS Variables

(These variables allow you to override predefined states without using !important)

--fyz-sb-icon-width: width of the Icon
--fyz-sb-icon-height: height of the Icon
--fyz-sb-icon-fill: color of the Icon

🛠️ Usage

Designer

(Simply click the desired icon, the configuration will be updated automatically)

Config

⌨️ Programmatical Data

How to style custom States/Sizes

This example shows how to style your Icon via CSS.
(In this example, customStateName is set to insane and customSizeName to massive)

[state="insane"] {
  --fyz-sb-icon-fill: red;
  background-color: yellow;
}
[state="insane"]:hover {
  background-color: blue;
}

[size="massive"] {
  --fyz-sb-icon-width: 125px;
  --fyz-sb-icon-height: 125px;
}

Use the Layout Brick to style icons based on this example.

How to load in a custom SVG

(If your custom Icon uses inline sizing, just set the size to custom)

const config: FyzSbIconConfig = {
  version: 'modern',
  size: 'custom',
  customSvg: `<svg> {...} </svg>`
};

How to update the icon via Scripting

// ⚙️ Retrieve the current configuration of the Brick
const config = fyzBrick.cRef.getConfig();

// 💱 Modify and merge the config to change to the desired icon/behavior
fyzBrick.cRef.mergeConfig({
  ...config, 
  iconCategory: 'social', 
  iconName: 'eco', 
  size: 'xlarge',
  customStateName: 'insane'
});