In the mobile app or web application, the “Icon” elements are used to denote a program or functionality. Most of the action items/objects are represented by an icon. In the mobile platform, the icons are part of the graphical presentation, so the icons should be in harmony with the action items for which they are used. Icons cannot be resized or stretched so they should be readable on the screen.
|When to use|
|Use the icons to:|
–> Improve the visualization and capture the user’s attention.
–> Provide the functionality and the action items.
–> Maintain the clutter-free screen appearance.
–> Enhance the usage of the functionality
The “Icon” element has the following property:
- UI Configuration
For the “Icon” element, you can configure the following UI properties:
|Tab||Property Name||Description||Mandatory||New Default Value||Visibility Rules|
|Basic||Reference Name||Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.||Yes||Icon_1|
|Basic||Icon Library||Click this list to select material.io. “Material.io” is a Google’s open-source design system that allows you to select an image for the icon element.||No||material.io|
|Basic||Choose Icon||Allows you to choose an icon from an icon library. To choose an icon:|
–> In the Choose Icon box, click the Add icon (), and the Material Icons dialog box opens.
–> In the Material Icons dialog box, select an image for the icon element.
–> After you select an image, click Select, and you successfully choose the icon/image for the icon element.
|Basic||Visible||Allows you to define the default visibility of the UI element.||No||marked|
|Basic||Enable||Allows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.||No||marked|
|UI Properties||Styles||Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element. These pre-defined styles are:|
|UI Properties- Alignment & Spacing||Margin||Allows you to desirably define a margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom borders of the element.||No||Theme Variable (Margin)|
|UI Properties- Alignment & Spacing||Element Alignment||Click this list to align the element as follows:|
–> Top Right
–> Top Left
–> Bottom Right
–> Bottom Left
|UI Properties- Icon||Size||Allows you define the size of the icon||No||16|
|UI Properties- Icon||Color||Allows you define the size of the icon||No||#393939|
|UI Properties- Shape & Decoration||X||Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.||No||Show & Disable|
|UI Properties- Shape & Decoration||Y||Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.||No||Show & Disable|
|UI Properties- Shape & Decoration||Fit Type||Allows you to configure the size of the icon (image of the icon) in the container based on the following options:|
It expands the width of the image in the image container to maintain the aspect ratio. After applying this option, the height of the image may be cropped in the image container.
After you select this option, it stretches the width and height of the image to fit the image in the image container.
After you select this option, it may resize the image to fit it in the image container to maintain the aspect ratio.
On the “Icon” element, you can configure the following event: