Proof of Concept

Using CSS to display state within an icon

You don't need a separate file for every state of an icon, all you need is simple CSS. Iconic is built exactly for this purpose.

HTML
<img src="signal.svg" class="svg-inject iconic-signal-strong" />
<img src="signal.svg" class="svg-inject iconic-signal-medium" />
<img src="signal.svg" class="svg-inject iconic-signal-weak" />
<img src="signal.svg" class="svg-inject iconic-signal-none" />
JS
$('.svg-inject').svgInject();
CSS
/*Strong signal*/
.iconic-signal.iconic-signal-strong .iconic-signal-base {
    fill:#569e26;
}
.iconic-signal.iconic-signal-strong .iconic-signal-wave * {
    stroke:#569e26;
}

/*Medium signal*/
.iconic-signal.iconic-signal-medium .iconic-signal-base {
    fill:#efc411;
}
.iconic-signal.iconic-signal-medium .iconic-signal-wave * {
    stroke:#efc411;
}
.iconic-signal.iconic-signal-medium .iconic-signal-wave-outer {
    opacity:.3;
    stroke-width:.5;
}

/*Weak signal*/
.iconic-signal.iconic-signal-weak .iconic-signal-base {
    fill:#b52808;
}
.iconic-signal.iconic-signal-weak .iconic-signal-wave * {
    stroke:#b52808;
}
.iconic-signal.iconic-signal-weak .iconic-signal-wave-outer ,
.iconic-signal.iconic-signal-weak .iconic-signal-wave-middle {
    opacity:.3;
    stroke-width:.5;
}

/*No signal*/
.iconic-signal.iconic-signal-none .iconic-signal-base {
    fill:#848484;
}
.iconic-signal.iconic-signal-none .iconic-signal-wave * {
    stroke:#848484;
    opacity:.3;
    stroke-width:.5;
}
SVG (from signal.svg)
<svg version="1.1" class="iconic iconic-signal" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="11.26px" height="8px" viewBox="0 0 11.26 8" enable-background="new 0 0 11.26 8" xml:space="preserve">
  <path class="iconic-signal-base" d="M6.337,7.247c-0.391-0.391-1.023-0.391-1.414,0l0.708,0.708L6.337,7.247z"/>
  <g class="iconic-signal-wave">
    <path class="iconic-signal-wave-inner" fill="none" stroke="#000000" stroke-miterlimit="10" d="M7.62,5.966c-1.098-1.098-2.88-1.098-3.977,0"/>
    <path class="iconic-signal-wave-middle" fill="none" stroke="#000000" stroke-miterlimit="10" d="M9.31,4.275C7.278,2.244,3.984,2.245,1.952,4.276"/>
    <path class="iconic-signal-wave-outer" fill="none" stroke="#000000" stroke-miterlimit="10" d="M10.9,2.684c-2.911-2.911-7.629-2.911-10.54,0"/>
  </g>
</svg>