Usage

Everytime you want to use an icon you write

<svg class="icon IconName">
<use xlink:href="#iconId"></use>
</svg>

The Problem

Styling the icon with CSS is limited because you can't access elements inside the Shadow DOM created by the <use>-tag.
Even the /deep/ combinator used to dive into Shadow DOM isn't working in Chrome Canary with SVGs (as time of writing).

The SVG <use> shadow dom is currently a much deeper, darker shadow than the one envisaged for web components: the individual parts of the re-used graphic cannot be manipulated separately from the original, and they aren't full Element objects. Web components shadow dom is halfway between a document nested in an iframe and full-fledged members of the DOM. The SVG use element instance tree is more like halfway between an image and an iframe.

None of which necessarily blocks CSS from getting through, but it means that new features won't automatically apply from the one situation to the other.

The style rule works because it's styling the original path directly; that CSS has to be in the same file as the icons. (If you're copying the icon code into your main file to support IE, that's not a big deal; if you're using external SVG icon files + IE-only AJAX, then it is.)

Also, on the topic of using your graphics program's output directly, note that while style rules on an element override presentation attributes, presentation attributes override inherited styles. So if your SVG code sets a fill color within the icon markup, but you want it to use the fill color it inherits from the use element, you'll need to set a specific fill: inherit; rule.