Adding drop shadows to SVG symbols - html

Question

I'm building a website that is very heavy on icons, so I'm working with SVG symbols to reduce duplication. In some cases the design calls for the symbols to have a drop shadow, and not in others. I'm struggling to figure out how I can add a drop shadow.
Example of my SVG:
<svg id="icons-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
...
<symbol id="icon-communications" viewBox="1400 0 200 200">
<title>Communications</title>
<rect style="fill: currentColor" x="1447.3" y="95.3" width="105.3" height="5.3"/>
<rect style="fill: currentColor" x="1447.3" y="78" width="105.3" height="5.3"/>
<polygon style="fill: currentColor" points="1463.2,127.9 1468,130.1 1475.7,113.6 1470.9,111.4 "/>
...
</symbol>
...
</svg>
I then include the icon on page using the standard:
<svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#icon-communications"/>
</svg>
I can then set the color of the icon like this:
.icon-svg use {
color: blue;
}
.error .icon-svg use {
color: red;
}
But I can't figure out how to add a drop shadow. I've tried CSS box-shadow, and also filter: drop-shadow(), but neither seem to do anything. e.g.
.someClass .icon-svg use {
color: #fff;
-webkit-filter: drop-shadow( 0 0 20px #000 );
filter: drop-shadow( 0 0 20px #000 );
}
Any help would be appreciated.

Answer 1

Use an SVG Filter:
.icon-svg use {
color: blue;
}
.error .icon-svg use {
color: red;
}
.icon-svg {
-webkit-filter: url(#dropshadowy);
}
<svg id="icons-svg" >
<defs>
<filter id="dropshadowy">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<symbol id="icon-communications" viewBox="1400 0 200 200">
<title>Communications</title>
<rect style="fill: currentColor" x="1447.3" y="95.3" width="105.3" height="5.3"/>
<rect style="fill: currentColor" x="1447.3" y="78" width="105.3" height="5.3"/>
<polygon style="fill: currentColor" points="1463.2,127.9 1468,130.1 1475.7,113.6 1470.9,111.4 "/>
</symbol>
</defs>
</svg>
<svg class="icon-svg" >
<use xlink:href="#icon-communications"/>
</svg>