Jigx icons
6 min
incorporating icons into your mobile app design enhances user navigation and interaction, making the app more user friendly and visually appealing at jigx we provide you with an extensive list of icons where can you use icons? while creating your solution, you can configure certain ui components, jigs, and widgets to use icons in the yaml additionally, you can determine the icon's position, size, and interaction use intellisense (ctrl+space) in the yaml in jigx builder to determine if you can specify an icon choose an icon from the list and configure the provided properties if you can examples of properties that use icons are leftelement , rightelement , and lefticon here is an example showing you how to specify an icon in a leftelement and how to use an expressions docid\ gsvs1zswrgpc0ewjvpihm to determine which icon to display depending on the current list item yaml type component list item options title =@ctx current item service subtitle =@ctx current item time & 'minutes for task completion' leftelement element icon icon =(@ctx current item materials) = true ? 'home' 'car garage' how do you add an icon? icons can be used either in the yaml key position to select an icon, for example icon house , or as the yaml value to determine that a property must use an icon, for example, in a leftelement icon property intellisense propmts you and shows where the icon can be used in the yaml examples using the icon as a key in yaml to display an alarm bell icon on the home hub widget yaml (icon key) title home security type jig default icon alarm bell using the icon as a value and then as the key in yaml to display the dollar icon in a component summary yaml (icon value) summary children type component summary options layout default title add to cart lefticon element icon icon currency dollar circle next to icon start typing the first two letters of an icon name, for example al, this will open the list of icons starting with two letters a preview of the icon is shown in the right popup with a link to the icon in https //www streamlinehq com/icons/streamline bold https //www streamlinehq com/icons/streamline bold streamline use the up and down arrows on your keyboard to browse through the list with the preview showing once you have decided on an icon click enter where can you see a preview of the icon? the list of available icons is extensive and is based off the icons in https //www streamlinehq com/icons/streamline bold https //www streamlinehq com/icons/streamline bold you welcome to browse this link in jigx builder a preview of each icon is available in the right popup with a link to the icon in https //www streamlinehq com/icons/streamline bold https //www streamlinehq com/icons/streamline bold streamline all you need to do is start typing the first two letters of an icon you want preview of icons icon assets in solutions all icons used throughout a solution are automatically added to the icon jigx file under the assets folder this improves performance of the app and ensures that all icons are available when the mobile device is offline and the app is in use the following applies to the asset list each icon change detection automatically causes an update in the list in the icon jigx file all icons from all jig files are added to the list, expect icons referenced or listed within datasources e g , =@ctx datasources ds icon you can manually add these icons to the asset list in the icon jigx file icons are added to the icon asset list automatically or you can manually add icons to the list automatically generated icons are indicated by a comment # auto generated after the icon name in the list manually added icons do not have the comment added icon asset list icons in actions adding an icon property in an action only applies to swipeable , secondary , and header actions primary actions do not support icon setups can i add custom icons? the list of icons is not customizable, and you cannot add custom icons if you are unable to find the icon you need, contact mailto\ support\@jigx com