This article explains how to add, change, and adjust the design of icons, as well as the differences and adjustment items between Font Awesome and Material Symbols.
What is an Icon Box?
Icon boxes are used to place icons on a page.
In Studio.Design, two types of icons are available: Font Awesome and Material Symbols.
The following design adjustments are available for each.
Adjustment details | Font Awesome | Material Symbols |
Display size | ✔︎ | ✔︎ |
Color | ✔︎ | ✔︎ |
Line thickness | × | ✔︎ |
Line style | × | ✔︎ |
Fill | × | ✔︎ |
Adding an Icon Box
Select the add icon
from the navigation menu on the left side of the screen.From the [Basic] tab in the Add panel, click Icon.
A heart icon
will be added to the screen by default.
Changing the Icon
Select the icon on the screen.
With the icon selected, press Enter or double-click it.
The Icon Settings panel will appear in the left panel.
Select an icon.
Keyword search is available in the search box at the top of the panel. (English only).
Font Awesome and Material Symbols can be switched by tabs at the top of the panel.
Select the icon you want to change, and the icon on the screen will be replaced.
Adjusting Icon Design
Select the target icon and open the right panel.
Select the "Icons" tab on the right panel and set the following items.
Color
Set the color and opacity of the icon.
Color and opacity can be set by HEX code.
Click the color swatch icon to display the color palette and make detailed settings.
Size
Set the display size in numerical values. The unit is px (pixel).
Thickness
* For Material Symbols only
Sets the thickness of the icon line. Move the slider to adjust the thickness.
Style
* For Material Symbols only
Sets the style of the icon line.
Select Outline, Round, or Sharp.
Fill
* For Material Symbols only
Sets whether the icon is painted or not.