Icons and Drupal: These are the Years of our Lives

The title alone says it all. If you're reading this post, it probably is because you desire an easier way to insert a simple icon into your Drupal site. Many times this involves adding an icon library into your theme and doing some pretty undesirable pre-processing or template overrides to insert them where you want.

What are icons?

They're images right? Well, technically yes. Icons are a visual representation of some intended object or action -  a pictogram essentially (think of a stop sign). What I'm really asking though is:

What file format/method are or should be used for icons?

This question has pretty much been answered for years. Whether it be a single static image or one massive image used for CSS sprites, they're usually a GIF, JPEG or PNG file. Pretty standard stuff and all is happy in the world. Well, guess what world? Meet font icons.

Font Icons

While this concept really isn't new, it probably isn't as widely known and has really changed how some of us themers approach icons in general. Fonts are vector-based in nature so they can be scaled, colored, text-shadowed... pretty much every CSS trick/method you can apply to text can be used for a font icon. This has really changed the game:

While font icons are great, they do have a few limitations. (I only mention this so I don't get a comment about it below.) They are mainly monochromatic in nature, given the limitations CSS text coloring. In theory, it is possible to apply perhaps another secondary color if your font icon provides ligature support (IcoMoon). If you still need full-colored icons though, sprites are still probably the best way to go. Simplistic and flat silhouette icons are "in" right now. So in retrospect, perhaps font icons aren't as "limited" as some may believe, but purposefully and strategically left this way... at least for now.

Regardless of how one might perceive it, fonts icons have simply added to the noise of what "icons" are now considered to be and the markup that comes with it. Ironically, one might think this would complicate matters more, but in reality font icons are typically easier to implement and are overall easier to maintain.

Icons in Drupal

This problematic issue isn't anything new to the Drupal community. In fact, there are issues and discussions that span all the way back to 2007 (if not farther). With a SoC initiative and a couple more attempts to put icons into Drupal, they either didn't gain much traction or have just failed over time, miserably. As a themer, I have noticed that often times the lack of icon support in Drupal has perhaps limited the design or even affected the choices in how we build a site.

Let's take a step back and look at the underlying issue though. It's never really been about the icons themselves, has it? Rather, "How do we get them in the site?", "Do we put them in the theme or a module?" or "Do they need to be interchangeable?". It is no wonder this issue seems to go around in circles and can never really seem to come through to fruition. Often times, we've been more focused on putting the actual icons in Drupal, instead of looking at the bigger picture.

Icon API

We need a framework/API. Period. Something that can manage our wonderful, varied, multi-licensed and different methods approach to icons. We also need a way to list these icons so they can be inserted into many common places throughout Drupal.

Icon bundles (sprites and fonts) are also inherently bandwidth vampires. Often times, we don't need all the icons on the single page request, just a few. This is where services like Fontello and IcoMoon have really soared. Granting us the ability to pick and choose only the icons we need, instead of loading an entire library, most of which we don't use.

Ultimately, my goal is to figure out the best approach for dealing with fully modularized icons. To elaborate and give one possible solution: base64 embed the icon data (image/font glyph) into a separate icon specific CSS file with just that class. This would allow the icon to be aggregated into the page's CSS and loaded only when that specific icon is being used. I'm not sure how useful this would ultimately end up being and further testing needs to be done on it. There are always pros and cons to any idea, especially anytime you consider performance.

So despite the obvious challenges ahead of me, I decided to take on this whole icons in Drupal issue. I spent quite a bit of my time researching the best approach to solve and ended up building the new Icon API. Recently, l released the first public beta:

Icon API - 7.x-1.0-beta1

This API provides the necessary framework for modules and themes to provide icon bundles inside of Drupal. The power really lies within the sub-modules though. Their ability to integrate an icon selector into the key areas of Drupal is really the primary goal of the API. Currently these integrations enhance the block, menu and field systems. There are plans to support content areas in a filter/WYSIWYG sub-module, but given the nature of what this entails, it may be a while.

In reality though, the possibilities are endless! You can integrate icons anywhere you can think of. Please feel free to create new feature requests in the issue queue (and of course submit bugs... there will always be bugs). The icon selector is still very rudimentary at the moment, mainly due to the focus being on the back-end integrations. Future plans also include making this very dynamic in an effort to support things like icon variations (icon sizes, colors, additional classes, etc).

Warning to non-drupal co-workers: Drupal themers and developers may involuntarily and randomly throw their hands up in the air to celebrate this newly and long awaited integration. This is completely normal and to be expected. Do not be alarmed.

Photo credit: ocean.flynn