Icon

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.

Usage

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

Icon Configuration

The “Icon” element has the following property:

• UI Configuration

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.	No	add
Basic	Visible	Allows you to define the default visibility of the UI element.	No	Selected
Basic	Business Rule	Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module.	No
Basic	Enable	Click this check box to make the element active or inactive. The user can perform the function on the active element.	No	Selected
Basic	Business Rule	Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module.	No
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: –> Primary –> Danger –> Secondary –> Success –> Warning –> Info	No	Primary
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’s Alignment	This property contains three tabs. You can use these tabs as follows: 1. Left:- By default, this tab is selected. It aligns the element to the left of the page. 2. Center:- If you select this tab, it aligns the element at the center of the page. 3. Right:- If you select this tab, it aligns the element to the right of the page.	No	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: Cover:– 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. Fill:- After you select this option, it stretches the width and height of the image to fit the image in the image container.  Contain:– After you select this option, it may resize the image to fit it in the image container to maintain the aspect ratio.	No

Event Configuration

On the “Icon” element, you can configure the following event:

• onLongPress
• onClick