I'm working with the designer and he sent me the following design for the search bar on our webpage:

I'm very much against using images in webpage design unless completely necessary, so I'm hoping that I can recreate the whole search bar widget in CSS. I know how to do border-radius, gradients, box-shadows, etc, so that's not a problem.

Question: Assuming CSS3 browser compatibility, how can I go about recreating the actual search button (the magnifying glass portion) with the double curved edge, and the slight drop shadow on the bottom left?

Thoughts: My initial feeling was that the search button would be circular and free-standing, then overlap the search input div with a negative left-margin, but then I was unsure how I would get that drop shadow.

Edit: I'm not completely opposed to using an image for the magnifying glass, but I've seen a similar icon created in CSS before. Would an image vs. pure CSS end up loading at the same speed, or should I do all I can do in pure CSS?