Icons
How to add and style icons.
Last updated
Was this helpful?
How to add and style icons.
Last updated
Was this helpful?
The icon part provides a large set of glyphs to provide context to various aspects of your app.
Appeggio has a library of over 5,000 icons to provide context to various aspects of your app.
Icons can provide a quick and intuitive way for users to understand and interact with information. For example, a trash can icon is commonly used to represent the action of deleting or discarding something. Similarly, a magnifying glass icon often symbolizes the action of searching.
Location in the Parts Library: Most used parts > Icons
Select the part where you’d like to add an icon.
Add a default icon by clicking "+" Icons. Select your preferred base icon. An icon will be added to the end of the part you selected.
To change the default icon, select the icon to activate the Icon Editor in the right menu. Then click on Icon > Value Set to reveal all of the icons available for you to choose from, and select.
The filter function can help you locate your preferred icon. For example, if you know you want an icon containing an arrow, key in ‘arrow’, and the result will return icons labeled as containing an arrow.
To change the position of an icon to within a part, select the icon, and go to Slot Position. You'll see there is the ability to append or prepend the icon. Prepending the icon places it at the beginning, and appending the icon places it at the end.
Icons are styled using the right property editors.
There are various preset sizing options, ranging from extra small through to 2XL. You can also specify a size using the height and width tabs. Icon sizes can be set according to different device sizes for responsiveness.
A ‘margin’ adds space outside of the icon. This can be applied to all, horizontal, vertical, top, right, bottom, and left.
‘Padding’ adds space around a part’s content inside of any defined borders. This can be applied to all, horizontal, vertical, top, right, bottom, and left.
The background color of the icon can changed using the Colors Editor, and selecting the background color. A color gradient can be applied to the background.
Adding an icon button is the same as adding any other part to your app. Go to the parts library, go to buttons, and you’ll see a range of buttons containing only icons.
refers to applying margins and padding to your part, and is accessed via the Decoration Editon on the right.
The icon can be changed using the Colors Editor in the right menu and changing the foreground color.
The of the icon can be amended using the opacity property. Go to the Decoration editor in the right menu, and go to 'Opacity'. You’ll see a sliding scale from 0 to 1, increasing in increments of 0.1.
A can be added and styled around the icon using the border style, border width, and border color properties.
It’s important to note that an icon cannot have a link directly added to it. However, there are a range of icon that can be linked.
Add and style your icon button, then as you see fit.
Customizing and formatting
Buttons
