properly display svg

app/pods/components/huegasm-app/component.js

@@ -23,11 +23,9 @@ export default Em.Component.extend({
 
   dimmerOnClass: function(){
     var dimmerOn = this.get('dimmerOn'),
-      storage = this.get('storage'),
-      className = null;
+      storage = this.get('storage');
 
     if(dimmerOn){
-      className = 'dimmerBulbOn';
       Em.$('body').addClass('dimmerOn');
       Em.$('html').addClass('dimmerOn');
     } else {
@@ -36,9 +34,7 @@ export default Em.Component.extend({
     }
 
     storage.set('huegasm.dimmerOn', dimmerOn);
-
-    return className;
-  }.property('dimmerOn'),
+  }.observes('dimmerOn'),
 
   init(){
     this._super();

app/pods/components/huegasm-app/template.hbs

@@ -19,6 +19,5 @@
 
 <footer id="footer">
    <p><span class="relative"><span id="dimmerWrapper" {{action "toggleDimmer"}}>
-       <img width="40" height="40" src="assets/images/bulb.svg" class={{dimmerOnClass}}>
    </span>Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</span></p>
 </footer>

app/styles/app.scss

@@ -889,12 +889,6 @@ md-switch.md-default-theme.md-checked .md-thumb {
   margin-top: 10px;
 }
 
-.dimmerBulbOn {
-  fill: gold;
-  stroke: gold;
-  stroke-width: 10px;
-}
-
 div.dimmerOn {
   color: white !important;
   background: #171717 !important;
@@ -978,10 +972,9 @@ body.dimmerOn {
   left: -50px;
   bottom: -10px;
   cursor: pointer;
-  svg {
-    width: 40px;
+  width: 35px;
   height: 40px;
-  }
+  background: url(images/bulb.svg) center center no-repeat;
 }
 
 .noUi-value-vertical {