replaced image based icons with widget-symbol approqch

app/app/components/folder/folders-list.js

@@ -47,13 +47,13 @@ export default Ember.Component.extend(TooltipMixin, NotifierMixin, {
                 id: "0",
                 title: "Empty",
 				description: "An empty canvas for your words",
-				img: "template-blank",
+				img: "insert_drive_file",
 				layout: "doc",
 				locked: true
             };
 
 			saved.forEach(function(t) {
-				Ember.set(t, 'img', 'template-saved');
+				Ember.set(t, 'img', 'content_copy');
 			});
 
             saved.unshiftObject(emptyTemplate);

app/app/styles/color.scss

@@ -37,6 +37,10 @@ $color-chip: #dff0f9;
 $color-chip-border: #daeaf3;
 $color-chip-text: #1b88e3;
 
+$color-symbol-box: #dce5e8;
+$color-symbol-icon: #a4b8be;
+
+
 .color-white {
 	color: $color-white !important;
 }

app/app/styles/widget/widget-symbol.scss

@@ -0,0 +1,17 @@
+.symbol {
+    display: inline-block;
+    border-radius: 2px;
+    height: 40px;
+    width: 40px;
+    padding: 0;
+    line-height: 0;
+    margin: 0;
+    text-align: center;
+	background-color: $color-symbol-box;
+
+    > .material-icons {
+        font-size: 22px;
+        margin-top: 20px;
+        color: $color-symbol-icon;
+    }
+}

app/app/styles/widget/widget.scss

@@ -75,3 +75,4 @@
 @import "widget-radio";
 @import "widget-tab";
 @import "widget-selection";
+@import "widget-symbol";

app/app/templates/components/document/page-wizard.hbs

@@ -27,7 +27,9 @@
 					{{#each blocks as |block|}}
 						<li class="item min-height">
 							<div class="icon">
-								<img class="img" src="/assets/img/section-saved.png" srcset="/assets/img/section-saved@2x.png"  {{action 'onInsertBlock' block}}/>
+								<div class="symbol" {{action 'onInsertBlock' block}}>
+									<i class="material-icons">view_agenda</i>
+								</div>
 								<div class="actions">
 									{{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id}}
 										<i class="material-icons">mode_edit</i>

app/app/templates/components/folder/start-document.hbs

@@ -9,7 +9,9 @@
 			{{#each savedTemplates key="id" as |template|}}
 				<li class="item">
 					<div class="icon">
-						<img class="img" src="/assets/img/{{template.img}}.png" srcset="/assets/img/{{template.img}}@2x.png" {{action 'startDocument' template}} />
+						<div class="symbol" {{action 'startDocument' template}}>
+							<i class="material-icons">{{template.img}}</i>
+						</div>
 						{{#if editor}}
 							{{#unless template.locked}}
 								<i class="material-icons edit-control" {{action 'editTemplate' template}}>mode_edit</i>