Actually, the media queries only work for CSS image properties, like background-image, not for HTML img elements. We do need something equivalent to HTML5's handling of video, where you just stick a bunch of different paths to various formats in the video tag, and the browser selects the best one. Something like that for images would be nice; now we have to resort to jQuery hacks.
If it contains all the different possible resolutions you might need, that one asset would be larger than the one of several assets appropriate for the device in question, so you'd be wasting everyone's bandwidth and needlessly degrading your site's performance.
Being icons, the difference is negligible. You can also show different images using pseudo elements, in any case you don't usually use image tags for icons, it's an image replacement, background or pseudo element.
What? You want a single asset that works at all resolutions, but you don't send the whole thing? Please elaborate.
[edit] I think you might be looking for a single vector design that looks good at all resolutions. Such a beast does not exist due to the low-resolution nature of most displays with which anti-aliasing can only help so much. There is no way to get around different designs for different rendered sizes if you want it to look good. You always design for a target rendered size. SVG just helps you serve 1x (most displays) and 2x (retina displays) resolution optimally with the same file. [/edit]
Not necessarily vector. For example, your server has two versions of your asset. One at 16px by 16px, the other at 32px by 32px. You browse to an associated page and your browser asks for the 16px by 16px version (by means of a header). The server sees two versions in storage and sends the correct one.
Apache already does this for languages, if you ask it to.
