Skip to content

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

  1. Open VertiTab settings page
  2. Click "Custom Themes" in the sidebar menu
  3. Select the theme to edit and click "Edit"
  4. Click the "🧩 Component Customization" tab
  5. 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

  1. Select appropriate default font size level
  2. For precise control, use the custom font size slider
  3. Observe preview effects and adjust to satisfactory size

Influencing Factor: IconButton Editor

Access Path

  1. In the "Component Customization" tab
  2. Find the "IconButton" configuration card and expand it

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

EditorDirect EffectIndirect Influence
MuiIconControls icon size itselfAll interface icons
IconButtonControls button container sizeDisplay effect of icons within buttons

Adjustment Strategy

Global Icon Size Adjustment

  1. Prioritize using MuiIcon editor
  2. Use "Custom Font Size" for precise control
  3. Recommended range: 12-24px suitable for most scenarios

Button Icon Optimization

  1. Coordinate with IconButton settings
  2. Increasing padding can make icons appear more comfortable
  3. Adjusting button size can improve icon click experience

Special Scenario Handling

  1. Small Icons: 8-12px, suitable for auxiliary elements
  2. Standard Icons: 16-20px, suitable for regular interface elements
  3. 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

  1. Maintain Consistency: Use the same size for icons with similar functions
  2. Consider Usability: Ensure icons are large enough for easy clicking
  3. Test Different Densities: Verify clarity on high-resolution screens
  4. 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.