Icon Size Settings
Icon size is primarily controlled through the MuiIcon editor, while also being influenced by the IconButton editor.
Primary Control: MuiIcon Editor
Access Path
- Open VertiTab settings page
- Click "Custom Themes" in the sidebar menu
- Select the theme to edit and click "Edit"
- Click the "🧩 Component Customization" tab
- Find the "Icon" configuration card and expand it
Icon Configuration Options
Default Property Settings
- Default Font Size: Choose from Inherit, Small, Medium, Large
- Default Color: Set the default display color for icons
Style Override Settings
- Custom Font Size: Precisely adjust 8-48px via slider
- Priority: Overrides default font size settings for all icons
- Real-time Preview: Effects display immediately when adjusting slider
Operation Steps
- Select appropriate default font size level
- For precise control, use the custom font size slider
- Observe preview effects and adjust to satisfactory size
Influencing Factor: IconButton Editor
Access Path
- In the "Component Customization" tab
- Find the "IconButton" configuration card and expand it
Related Settings
Default Properties
- Size: Small, Medium, Large
- Scope of Influence: Overall size of icon buttons, indirectly affecting icon display within them
Style Overrides
- Padding: Adjust internal space within icon buttons
- Margin: Adjust spacing between buttons and surrounding elements
- Indirect Influence: These settings affect the visual appearance of icons within buttons
Relationship Between Editors
Editor | Direct Effect | Indirect Influence |
---|---|---|
MuiIcon | Controls icon size itself | All interface icons |
IconButton | Controls button container size | Display effect of icons within buttons |
Adjustment Strategy
Global Icon Size Adjustment
- Prioritize using MuiIcon editor
- Use "Custom Font Size" for precise control
- Recommended range: 12-24px suitable for most scenarios
Button Icon Optimization
- Coordinate with IconButton settings
- Increasing padding can make icons appear more comfortable
- Adjusting button size can improve icon click experience
Special Scenario Handling
- Small Icons: 8-12px, suitable for auxiliary elements
- Standard Icons: 16-20px, suitable for regular interface elements
- Large Icons: 24-32px, suitable for important action buttons
Actual Effects
- Menu Icons: Icons in settings, navigation, and other locations
- Action Icons: Close, minimize, refresh, and other functional icons
- Status Icons: Loading, warning, success, and other status indicators
- Decorative Icons: Interface beautification and visual guidance icons
Usage Recommendations
- Maintain Consistency: Use the same size for icons with similar functions
- Consider Usability: Ensure icons are large enough for easy clicking
- Test Different Densities: Verify clarity on high-resolution screens
- Balance Aesthetics and Function: Consider both beauty and practicality
Saving Settings
All adjustments are previewed in real-time. Click the "Save" button in the theme editor to save changes.