Zendesk: Custom Category Boxes with SVG icons

zendesk.css

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200);
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/cyborg/bootstrap.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css");


body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
  font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 200 !important;
}

.service-box {
    margin: 50px auto 0;
    max-width: 400px;
    min-height: 230px;
    border: solid 1px darkgrey;
    padding: 10px 5px 10px 5px;
}

@media(min-width:992px) {
    .service-box {
        margin: 20px auto 0;
    }
}

.service-box p {
    margin-bottom: 0;
}


.bg-dark {
    color: #fff;
    background-color: #222;
}
aside {
  	margin-top: 40px;
    padding: 50px 0;
}

.list-group-item {
    border: none !important;
}
a {
   color: #019cde !important;
}

svg path {
    fill: #333
}

zendesk.html

<!--must reference Bootstrap framework copy CSS file below-->
<div class="container">
      {{#each categories}}
                <div class="col-sm-6 col-md-3  text-center">
                    <div class="service-box">
                        {{#is name 'Getting Started'}}<img class="svg" src="{{asset 'Browser.svg'}}" />{{/is}}
                          {{#is name 'Sense App'}}<img class="svg" src="{{asset 'comment.svg'}}" />{{/is}}
                       {{#is name 'Sense'}}<img class="svg" src="{{asset 'padlock.svg'}}" />{{/is}}
                          {{#is name 'Sleep Pill'}}<img class="svg" src="{{asset 'heart.svg'}}" />{{/is}}
                        <h4><a href="{{url}}">{{name}}</a></h4>
                        <p class="text-muted">{{description}}</p>
                    </div>
                </div> 
      {{/each}}
  </div> <!--end container -->
    
 {{#if promoted_articles}}  
<aside class="bg-dark">
   
        <div class="container text-center">
            <div class="call-to-action">
                 {{#if promoted_articles}}
      <section class="promoted-articles">
        <h3>Popular Articles</h3>
        <ul class="list-group">
          {{#each promoted_articles}}
          	<div class="col-sm-6">
            <li class ="list-group-item">
              <a href="{{url}}">{{title}}</a>
            </li>
          </div>
          {{/each}}
        </ul>
      </section>
    {{/if}}
            </div>
        </div>
    </aside>  
  {{/if}}
   

zendesk.js

/*This is optional - turning svg files inline so I can change the color via CSS /*

 /*
 * Replace all SVG images with inline SVG
 */
jQuery('img.svg').each(function(){
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = jQuery(data).find('svg');

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        $svg = $svg.removeAttr('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
            $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
        }

        // Replace image with new SVG
        $img.replaceWith($svg);

    }, 'xml');

});