Icon Component
Overview
The icon component is used to display an icon and can be made clickable using blocks.
Properties
You can customize your icon component using the following properties:
Icon
Icon type
Icon name
The icon displayed in the icon component.
Stroke Color
Color
Color of outline
Fill Color
Color
Color inside the icon
Stroke Width
Number
Width of outline
Layout
X
coordinate value
Position of the upper left corner of the icon on the X-axis, where the left side of the screen is X=0.
Y
coordinate value
Position of the upper left corner of the icon on the Y-axis, where the top of the screen is Y=0.
Height
number in pixels
The icon's height is defined by a custom number of pixels.
Width
number in pixels
The icon's width is defined by a custom number of pixels.
Resize Mode
Stretch
Stretches the icon to fit the dimensions of the device's screen.
Style
Visible
visible
Users can see the icon.
Visible
invisible
Users cannot see the icon.
Border: Color
color
The icon's border is the color selected.
Border: Width
number in pixels
The width of the icon's border is defined by a custom number of pixels.
Border: Radius
number in pixels
The radius of the icon border’s corners is defined by a custom number of pixels.
Shadow: Color
color
The icon's shadow is the color selected.
Shadow: Opacity
number between 0 and 100
The opacity of the icon's shadow.
Shadow: Radius
number in pixels
The radius of the icon shadow’s corners is defined by a custom number of pixels.
Shadow: Offset
number in pixels
How far the icon's shadow should be offset, in height and width, is defined by a custom number of pixels.
Icon Blocks
To access the blocks specific to the icon component:
On the Design tab, add an Icon component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the icon component.
A drawer of icon-specific blocks opens.
This event will fire when the user clicks on the icon.
Set the icon component's icon type.
Get the icon component's icon type.
Set the icon component's stroke color.
Get the icon component's stroke color.
Set the icon component's stroke width.
Get the icon component's stroke width.
Set the icon component's fill color.
Get the icon component's fill color.
Set the icon component's height.
Get the icon component's height.
Returns the height of the icon component in pixels after it has been rendered on-screen.
Set the icon component's width.
Get the icon component's width.
Returns the width of the icon component in pixels after it has been rendered on-screen.
Set whether the icon component is visible on the screen.
Get whether the icon component is visible on the screen.
Set the position icon the upper left corner of the icon on the X-axis, where the left side of the screen is X=0.
Get the position of the upper left corner of the icon on the X-axis, where the left side of the screen is X=0.
Set the position of the upper left corner of the icon on the Y-axis, where the top of the screen is Y=0.
Get the position of the upper left corner of the icon on the Y-axis, where the top of the screen is Y=0.
Last updated
Was this helpful?