Icon Size Settings
Icon Size Settings
Section titled “Icon Size Settings”Icon size is primarily controlled through the MuiIcon editor, while also being influenced by the IconButton editor.
Primary Control: MuiIcon Editor
Section titled “Primary Control: MuiIcon Editor”Access Path
Section titled “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
Section titled “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
Section titled “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
Section titled “Influencing Factor: IconButton Editor”Access Path
Section titled “Access Path”- In the “Component Customization” tab
- Find the “IconButton” configuration card and expand it
Related Settings
Section titled “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
Section titled “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
Section titled “Adjustment Strategy”Global Icon Size Adjustment
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “Saving Settings”All adjustments are previewed in real-time. Click the “Save” button in the theme editor to save changes.