SVG - Accessing individual nodes on xlink:href external source - css

Question

I was looking at Chris Coier's SVG tricks on CSS-tricks.com and also recently saw him at a conference where he talked about the powers of SVGs and how you can keep all assets in one external svg file.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="beaker" viewBox="214.7 0 182.6 792">
<!-- <path>s and whatever other shapes in here -->
</symbol>
<symbol id="shape-icon-2" viewBox="0 26 100 48">
<!-- <path>s and whatever other shapes in here -->
</symbol>
</svg>
Then, you could just use it like this:
<svg class="icon">
<use xlink:href="#shape-icon-1" />
</svg>
<svg class="icon">
<use xlink:href="#shape-icon-2" />
</svg>
Sounds great! BUT, I want to be able to access individual nodes in each symbol and altering them with CSS like I normally would if the SVG was inline in the HTMl.
Take a look at this CodePen:
http://codepen.io/chriscoyier/pen/Hwcxp
I thought I could do this, but I can't get it to work:
.icon path{
fill: green;
}
This does, but this alters the actual source svg
#beaker path {
fill: green;
}
What I want to do is reuse a graphical element in a grid. And on hover, alter a node in the svg. But only on the node in that particular parent. Not all of them.

Answer 1

Firefox does some unknown thing where you can style it this way.
edit:
To be more precise:
Firefox seems to turn that symbol kinda into in the DOM.
http://codepen.io/Type-Style/pen/EaGbam
.hoverME:hover path, .hoverME:hover circle {
fill: red;
}
This also works with an external file. (Unfortunatly it does not with crossDomain Files)
"But you can insert just the class name of the path. That will work."
I mean as long as you stay within the SVG with your selectors it will work.
circle:hover, path:hover {
fill: red;
}