Skip to content
Atom Material Icons

Basic Usage

Getting Started

Section titled “Getting Started”

After installing the plugin, it will automatically start replacing your file and folder icons with beautiful material design alternatives. The plugin works out of the box with sensible defaults, but offers extensive customization options.

Accessing Settings

Section titled “Accessing Settings”

To customize the plugin, navigate to the settings:

Path: Settings/Preferences → Appearance & Behavior → Atom Material Icons

Keyboard Shortcut:

  • Windows/Linux: Ctrl+Alt+S then search for “Atom Material”
  • macOS: Cmd+, then search for “Atom Material”

Main Features Overview

Section titled “Main Features Overview”

File Icons

Section titled “File Icons”

The plugin automatically replaces file icons based on:

  • File extensions (.js, .ts, .py, .java, etc.)
  • File content (configuration files, test files, etc.)
  • Naming patterns (package.json, webpack.config.js, etc.)

Here’s how your file icons will look in the project explorer:

File Icons Examples

Folder Icons

Section titled “Folder Icons”

Contextual folder icons are applied based on:

  • Common patterns: src, docs, test, assets, components
  • Framework folders: node_modules, .git, .vscode, dist
  • Custom associations: Define your own folder icon mappings

See the different folder icons in action:

Folder Icons Examples

UI Icons

Section titled “UI Icons”

Enhanced interface elements include:

  • Toolbar icons: Action buttons and tool windows
  • Gutter icons: Debugger, version control, and error indicators
  • PSI icons: Code structure elements (classes, methods, variables)

Basic Settings

Section titled “Basic Settings”

Enable/Disable Features

Section titled “Enable/Disable Features”

Toggle different icon categories on or off:

  • File Icons: Enable/disable file icon replacement
  • Folder Icons: Enable/disable folder icon replacement
  • UI Icons: Enable/disable toolbar and interface icon replacement
  • PSI Icons: Enable/disable code structure icon replacement

Icon Size

Section titled “Icon Size”

Adjust the size of file and folder icons:

  • Range: 12px to 24px
  • Default: 16px
  • Recommendation: Use smaller sizes (12-14px) for better performance

Visual Options

Section titled “Visual Options”

Monochrome Filter

Section titled “Monochrome Filter”

Apply a single color filter to all icons:

  • Enable: Toggle monochrome mode on/off
  • Color: Choose any color (default: gray)
  • Use case: Perfect for minimalist themes or specific color schemes

Accent Color

Section titled “Accent Color”

Customize the accent color for specific UI elements:

  • Close buttons: Tab close buttons
  • Highlighted arrows: Tree view expand/collapse arrows
  • Loading indicators: Progress indicators

Quick Actions

Section titled “Quick Actions”

Refresh Icons

Section titled “Refresh Icons”

If icons don’t update immediately after changes:

  1. Apply settings by clicking OK
  2. Restart your IDE
  3. Or use File → Invalidate Caches and Restart

Reset to Defaults

Section titled “Reset to Defaults”

To restore original settings:

  1. Open plugin settings
  2. Look for “Reset” or “Restore Defaults” button
  3. Restart IDE to apply changes

Common Use Cases

Section titled “Common Use Cases”

Dark Theme Setup

Section titled “Dark Theme Setup”

For dark themes, consider:

  • Monochrome Filter: Enable with white (#FFFFFF) or light gray (#CCCCCC)
  • Accent Color: Choose bright colors for better contrast
  • Icon Size: Slightly larger sizes (18-20px) for better visibility

Light Theme Setup

Section titled “Light Theme Setup”

For light themes:

  • Monochrome Filter: Use dark colors (#333333) or keep disabled
  • Accent Color: Use darker colors for good contrast
  • Icon Size: Standard 16px works well

Performance Optimization

Section titled “Performance Optimization”

For better performance:

  • Reduce Icon Size: Use 12px or 14px
  • Disable Unused Features: Turn off PSI icons if not needed
  • Limit Custom Associations: Keep custom patterns reasonable

Keyboard Shortcuts

Section titled “Keyboard Shortcuts”

While the plugin doesn’t add new keyboard shortcuts, you can quickly access related features:

  • Ctrl/Cmd + Shift + A: Open “Find Action” and search for “Atom Material”
  • Ctrl/Cmd + Alt + S: Open Settings directly
  • Ctrl/Cmd + Shift + F12: Toggle all tool windows (better see file icons)

File Tree Navigation

Section titled “File Tree Navigation”

With the plugin active, your file tree becomes more intuitive:

  • Instant Recognition: Quickly identify file types at a glance
  • Contextual Folders: Understand project structure better
  • Consistent Design: Unified visual language across your project

What’s Next?

Section titled “What’s Next?”

Now that you understand the basics, explore more advanced features: