Icon Element in BML
The <icon> element is used to display icons within a BML content. This element is particularly useful for adding visual elements to enhance user interfaces, providing a way to include symbols and graphics that can communicate specific actions or statuses more effectively than text.
Attributes
The <icon> element has a set of attributes that control its positioning, size, and appearance. Below is a list of these attributes.
| Attribute Name | Required | Type | Description |
|---|---|---|---|
| name | Yes | String | Specifies the name of the icon to be displayed. The name should correspond to a predefined set of icons in BML. |
| color | No | Hex value | Defines the color of the icon. |
| size | No | Number | Sets the size of the icon (width and height), typically in pixels. |
| x | No | Number | Determines the X-axis position of the icon within its parent container. |
| y | No | Number | Determines the Y-axis position of the icon within its parent container. |
| marginTop | No | Number | Sets the top margin of the icon. |
| marginBottom | No | Number | Sets the bottom margin of the icon. |
| marginLeft | No | Number | Sets the left margin of the icon. |
| marginRight | No | Number | Sets the right margin of the icon. |
Finding icon names
BizzStream incorporates Fluent UI Web icons, a comprehensive collection of interface icons designed to enhance user experience through consistent and intuitive visual cues. These icons are part of the Fluent UI system developed by Microsoft, ensuring seamless integration and visual coherence across platforms. An overview of the available icons can be found on the official Fluent UI website.
Examples
Basic Icon Usage
This example demonstrates how to use the icon element to display a simple icon:
<icon name="PageHeaderEdit" size="24"/>
Result
