Skip to main content

Icon

📘 Developer Guide

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

🔁 Example

Designer

image.png

Runtime

image.png

⚙️ 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 Please always use modern, since legacy will be removed in the future!
It just exists for backward compability purposes
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 will even allow you to override predefined states without the use of !important)

–fyz-sb-icon-width translates to the width of the Icon
–fyz-sb-icon-height translates to the height of the Icon
–fyz-sb-icon-fill translates to the color of the Icon

🛠️ Usage

Designer

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

image.png

Runtime

image.png

2. Programmatical Data

2.1 How to style custom States/Sizes

This example shows, how to style your Icon via CSS
(For this example we set customStateName 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 that example

TODO:image.png

Insert Image here of Layoutbrick and the example

image.png

2.2. How to load in a custom SVG

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

const config: FyzSbIconConfig {
	version: 'modern'
	size: 'custom'
	customSvg: `<svg> {...} </svg>`
}
2.3 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'
})
Back to top