My question is when, if ever, a shadowless version of an icon is preferred over the shadowed version.
By shadowed I mean the tiny, almost imperceptible little black gaussian blur below the icon.
I should also mention that it is a web application I'm developing.
It depends on the application.
Youtube uses these shadows to create a clear indication of what a button is. As you can see here, the Safety button is ready to be clicked. The shadow draws attention so the other buttons (these are footer elements intended to be inconspicuous) fall into the background.
If your visual design is very three dimensional and or involves a natural lighting scheme, these shadows can add more than aesthetics, they provide affordance.
However shadows don't always fit. Windows Metro has a crisp, flat, typographicly focused design.
Here buttons and icons are made apparent by their contours, not their shadows. Shadows are a 3 dimensional effect and rarely have place in a 2D plane.
It's purely for aesthetics and to give a sense of reality to the user, things that you want to give stronger presence on the page need shadows and those that make the whole page look better also need shadows.
The shadow gives the 3d perspective so you can give shadows to things that really exists in relative your web applications or just use it for call for action buttons.
I think the good use of shadows can make a button or icon look real, but that really depends on your approach to the design, from my own personal experience shadows work best with not so complex icons, otherwise it creates too much visual noise.
A small dark pixel line would indicate that the icon lays on the button or layer. On one side it can be just aesthetics, on the other it can increase the feeling of contrast. So it's a question of what you want it to look like or that sould be the "job" of your icons. Think about that first, then decide what would fit your application. Form follows function but make it nice and beautiful too. :-)
