Since I'm using the MaterialDesignIcons library in most of my projects - (Material Freebox OS, Les Joies de SUPINFO, Munin-for-Android.com, munin-www-labs, …) -, I often open a new tab and browse materialdesignicons.com to find the mdi-* that suits my needs.

This appeared to be quite time consuming and could be optimized: MaterialDesignIcons Picker was born.

MaterialDesignIcons-Picker

Goals

  1. Performances: is was fed up by the whole new tab + wait until materialdesignicons.com finishes loading + type a random search + wait until the filter finishes filtering + close tab thing. The popup had to load as fast as possible - which isn't as easy as we can think (we have to inflate 1000+ icons into the page)
  2. Open-source, as usual
  3. Firefox compatibility: Firefox supports WebExtensions, allowing us to develop a single extension for both Chrome and Firefox. Though mainly optimized and tested for Google Chrome, MaterialDesignIcons Picker will be available soon on Firefox. But there's a big downside here: Firefox Addons Gallery validation process is way stricter than Google Chrome's one, and denies loading resources (neither CSS, JS nor fonts) from external sources. That's why we have to ship MDI's resources into the extension.
  4. Design, as usual: the extension's UI should be close to materialdesignicons.com's, but adapted to a 380x550px viewport.
  5. Auto-updated: v1.1.0 introduced fetching icons from materialdesignicons.com instead of shipping its list into the extension. I had to remove this though, because of Firefox's strict publication rules (see #3). A new version of the extension will be published when the icons pack gets updated.

Download MaterialDesignIcons Picker on the Chrome Web Store
Browse the project on GitHub