Atom Material File Icons Extension

This extension is a port of Atom File Icons for use in Google Chrome and Mozilla Firefox.

It replaces the standard file and folder icons with more suitable options related to file types, frameworks, or programming languages.

• Atom Material File Icons Extension
  • Chrome Extension
  • Firefox Extension
  • Edge Extension
  • Supported Sites
  • Features
    • Icon Packs
    • File Icons
    • Folder Icons
  • Development
    • Icon Generator
    • Gulp Prepare
    • Plasmo
    • Releasing
  • Credits

Chrome Extension

https://chrome.google.com/webstore/detail/atom-file-icons-web/pljfkbaipkidhmaljaaakibigbcmmpnc

Firefox Extension

https://addons.mozilla.org/en-US/firefox/addon/atom-file-icons-web/

Edge Extension

https://microsoftedge.microsoft.com/addons/detail/atom-material-icons/ajfcnjlggplaibcmaannbijmblhiiiee

Supported Sites

This extension works on the following websites:

• GitHub
• GitLab
• Bitbucket
• Gitee
• Azure

Features

• Replaces file icons with their relevant logo icons
  • According to their extension (Java, PHP, Ruby...)
  • According to the framework (Android, NPM, RSpec...)
  • According to the program used with (Babel, Docker, CircleCI...)
• Replaces directories:
  • With a common pattern: src, main, app, img, docs...
  • With a specific pattern: node_modules, .vscode, .git...
• Settings:
  • Icon size: Change the icon size on the fly
  • Monochrome: Use monochrome icons
  • Folder Color: Change the color of regular folders
  • Icon Packs: Enable specific icon packs

Icon Packs

Icon Packs allow customization of icons based on common file patterns in selected frameworks like "controller", "service", "model", "view", etc.

Available icon packs:

• Angular
• NestJS
• NextJS
• NgRx
• Rails
• Redux
• Recoil
• Tests

File Icons

Folder Icons

Development

Icon Generator

To build the extension, first clone the iconGenerator repository containing all the icons. Set it up by following these steps:

git clone https://github.com/mallowigi/iconGenerator.git
npm install && cd iconGenerator && npm install
npm run build

After running these commands, the iconGenerator folder will contain all the icons and the icon_associations.json and folder_associations.json files, which describe the associations between file patterns and icons.

To rerun the generator:

npm run convert

Gulp Prepare

Next, you need to generate the index file that loads all icons as React components. This is done thanks to the Gulp task runner.

npm run prepare

This process creates the index.ts file and places it in the public/icons/files and public/icons/folders directories.

Plasmo

The project uses Plasmo for building and running web extensions. Plasmo simplifies web extension development by supporting the latest web technologies like Webpack, TypeScript, React, Vite, etc.

To start the development server in watch mode and generate an extension stub:

npm run dev

Load the dev extension in your browser from chrome://extensions (or similar) using the build/chrome-mv3-dev directory. The extension will support hot reload and other features.

Credits

Special thanks to:

• The Material Theme UI plugin
• Atom File Icons and Sublime Text A File Icon
• Scientifics Study Vectors for the plugin icon
• File-Icons
• FontAwesome 4.7.0
• MFixx
• Devicons
• Octicons
• Material Design Icons