From 7aa121341e52571c740006bc8b787d816aaa45fa Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Fri, 4 Sep 2015 14:59:31 +0200
Subject: [PATCH] Moved to new @Icon('icon-name', 'icon-size') helper for .eco
 files.

---
 app/assets/javascripts/app/index.js.coffee    |  4 ++
 .../app/views/agent_ticket_create.jst.eco     |  6 +--
 .../app/views/agent_user_create.jst.eco       |  2 +-
 .../channel/email_account_overview.jst.eco    |  4 +-
 .../channel/email_account_wizard.jst.eco      | 12 ++---
 .../channel/email_notification_wizard.jst.eco |  6 +--
 .../first_steps_clues_content.jst.eco         |  2 +-
 .../app/views/generic/actions.jst.eco         |  4 +-
 .../app/views/generic/attachment.jst.eco      |  2 +-
 .../app/views/generic/attachment_item.jst.eco |  2 +-
 .../app/views/generic/attribute.jst.eco       |  2 +-
 .../app/views/generic/error/generic.jst.eco   |  2 +-
 .../app/views/generic/error/not_found.jst.eco |  2 +-
 .../views/generic/error/unauthorized.jst.eco  |  2 +-
 .../app/views/generic/radio.jst.eco           |  4 +-
 .../views/generic/searchable_select.jst.eco   |  2 +-
 .../app/views/generic/select.jst.eco          |  2 +-
 .../app/views/generic/sidebar_tabs.jst.eco    |  4 +-
 .../app/views/generic/table.jst.eco           | 18 +++----
 .../views/generic/user_search/input.jst.eco   |  2 +-
 .../user_search/item_organization.jst.eco     |  4 +-
 .../item_organization_members.jst.eco         |  2 +-
 .../generic/user_search/item_user.jst.eco     |  2 +-
 .../generic/user_search/new_user.jst.eco      |  2 +-
 .../app/views/getting_started/admin.jst.eco   |  2 +-
 .../app/views/getting_started/agent.jst.eco   |  2 +-
 .../auto_wizard_enabled.jst.eco               |  2 +-
 .../auto_wizard_failed.jst.eco                |  2 +-
 .../auto_wizard_splash.jst.eco                |  2 +-
 .../app/views/getting_started/base.jst.eco    |  2 +-
 .../app/views/getting_started/channel.jst.eco |  2 +-
 .../app/views/getting_started/email.jst.eco   |  2 +-
 .../email_notification.jst.eco                |  2 +-
 .../email_pre_configured.jst.eco              |  2 +-
 .../app/views/getting_started/finish.jst.eco  |  2 +-
 .../app/views/getting_started/intro.jst.eco   |  2 +-
 .../app/views/import/index.jst.eco            |  2 +-
 .../javascripts/app/views/import/otrs.jst.eco | 16 +++---
 .../app/views/layout_ref/clue_content.jst.eco |  2 +-
 .../layout_ref/communication_reply.jst.eco    |  6 +--
 .../app/views/layout_ref/content.jst.eco      | 50 +++++++++----------
 .../app/views/layout_ref/error.jst.eco        |  2 +-
 .../app/views/layout_ref/highlight.jst.eco    | 12 ++---
 .../app/views/layout_ref/inputs.jst.eco       |  2 +-
 .../layout_ref/insufficient_rights.jst.eco    |  2 +-
 .../app/views/layout_ref/local_modal.jst.eco  |  2 +-
 .../views/layout_ref/merge_customer.jst.eco   | 22 ++++----
 .../layout_ref/organization_profile.jst.eco   |  6 +--
 .../javascripts/app/views/link/info.jst.eco   |  4 +-
 .../javascripts/app/views/login.jst.eco       |  6 +--
 .../javascripts/app/views/modal.jst.eco       |  2 +-
 .../javascripts/app/views/navigation.jst.eco  |  6 +--
 .../app/views/navigation/menu.jst.eco         |  6 +--
 .../app/views/navigation/personal.jst.eco     |  6 +--
 .../app/views/navigation/result.jst.eco       |  2 +-
 .../views/organization_profile/object.jst.eco |  2 +-
 .../app/views/profile/avatar-holder.jst.eco   |  2 +-
 .../app/views/profile/avatar.jst.eco          |  2 +-
 .../app/views/profile/devices.jst.eco         |  2 +-
 .../javascripts/app/views/session.jst.eco     |  2 +-
 .../app/views/task_widget_tasks.jst.eco       | 18 +++----
 .../javascripts/app/views/ticket_zoom.jst.eco |  8 +--
 .../views/ticket_zoom/article_view.jst.eco    |  4 +-
 .../ticket_zoom/article_view_actions.jst.eco  |  2 +-
 .../app/views/ticket_zoom/highlighter.jst.eco |  4 +-
 .../ticket_zoom/overview_navigator.jst.eco    | 12 ++++-
 app/assets/javascripts/app/views/user.jst.eco |  2 +-
 .../app/views/widget/organization.jst.eco     |  2 +-
 .../views/widget/switch_back_to_user.jst.eco  |  4 +-
 .../javascripts/app/views/widget/tag.jst.eco  |  3 +-
 .../views/widget/ticket_stats_list.jst.eco    |  2 +-
 71 files changed, 175 insertions(+), 170 deletions(-)

diff --git a/app/assets/javascripts/app/index.js.coffee b/app/assets/javascripts/app/index.js.coffee
index 602831265..46a8f30fc 100644
--- a/app/assets/javascripts/app/index.js.coffee
+++ b/app/assets/javascripts/app/index.js.coffee
@@ -229,6 +229,10 @@ class App extends Spine.Controller
         humanTime = App.PrettyDate.humanTime(time, escalation)
         "<time class=\"humanTimeFromNow #{cssClass}\" data-time=\"#{time}\" data-tooltip=\"#{timestamp}\">#{humanTime}</time>"
 
+      # define icon helper
+      params.Icon = (name, className = '') ->
+        "<svg class=\"#{className}\"><use xlink:href=\"##{name}\" /></svg>"
+
       # define template
       JST["app/views/#{name}"](params)
     template
diff --git a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
index 4b6b4dd94..60cef79ce 100644
--- a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
+++ b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
@@ -9,17 +9,17 @@
         <ul class="horizontal tabs type-tabs">
 
           <li class="tab u-textTruncate" data-type="phone-in">
-            <svg class="tab-icon"><use xlink:href="#icon-received-calls" /></svg>
+            <%- @Icon('icon-received-calls', 'tab-icon') %>
             <%- @T('Received Call') %>
           </li>
 
           <li class="tab u-textTruncate" data-type="phone-out">
-            <svg class="tab-icon"><use xlink:href="#icon-outbound-calls" /></svg>
+            <%- @Icon('icon-outbound-calls', 'tab-icon') %>
             <%- @T('Outbound Call') %>
           </li>
 
          <li class="tab u-textTruncate" data-type="email-out">
-            <svg class="tab-icon"><use xlink:href="#icon-email" /></svg>
+            <%- @Icon('icon-email', 'tab-icon') %>
             <%- @T('Send Email') %>
           </li>
         </ul>
diff --git a/app/assets/javascripts/app/views/agent_user_create.jst.eco b/app/assets/javascripts/app/views/agent_user_create.jst.eco
index 08d301a53..1bc7f2b1a 100644
--- a/app/assets/javascripts/app/views/agent_user_create.jst.eco
+++ b/app/assets/javascripts/app/views/agent_user_create.jst.eco
@@ -3,7 +3,7 @@
   <div class="modal-content">
     <div class="modal-header">
       <div class="modal-close js-close">
-        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
       </div>
       <h1 class="modal-title"><%- @T( @head ) %></h1>
     </div>
diff --git a/app/assets/javascripts/app/views/channel/email_account_overview.jst.eco b/app/assets/javascripts/app/views/channel/email_account_overview.jst.eco
index 6d80700dd..010caa54b 100644
--- a/app/assets/javascripts/app/views/channel/email_account_overview.jst.eco
+++ b/app/assets/javascripts/app/views/channel/email_account_overview.jst.eco
@@ -59,10 +59,10 @@
               <li><%- @T('none') %></li>
           <% end %>
           </ul>
-          <a href="#" data-type="email-address-new" title="<%- @Ti('New Email Address') %>"><svg class="icon-trash"><use xlink:href="#icon-plus"></use></svg></a>
+          <a href="#" data-type="email-address-new" title="<%- @Ti('New Email Address') %>"><%- @Icon('icon-plus', 'icon-trash') %></a>
         </td>
         <td>
-          <a href="#" data-type="delete" title="<%- @Ti('Delete') %>"><svg class="icon-trash"><use xlink:href="#icon-trash"></use></svg></a>
+          <a href="#" data-type="delete" title="<%- @Ti('Delete') %>"><%- @Icon('icon-trash', 'icon-trash') %></a>
         </td>
       </tr>
       <% if channel.status_in is 'error': %>
diff --git a/app/assets/javascripts/app/views/channel/email_account_wizard.jst.eco b/app/assets/javascripts/app/views/channel/email_account_wizard.jst.eco
index 971b550e0..c57108470 100644
--- a/app/assets/javascripts/app/views/channel/email_account_wizard.jst.eco
+++ b/app/assets/javascripts/app/views/channel/email_account_wizard.jst.eco
@@ -7,7 +7,7 @@
     <!-- /dummy to prevent chrome to ask for password save -->
     <div class="modal-header">
       <div class="modal-close js-close">
-        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
       </div>
       <h1 class="modal-title"><%- @T('Email Account') %></h1>
     </div>
@@ -40,7 +40,7 @@
   <form class="modal-content setup wizard hide js-probe">
     <div class="modal-header">
       <div class="modal-close js-close">
-        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
       </div>
       <h1 class="modal-title"><%- @T('Email Account') %></h1>
     </div>
@@ -57,7 +57,7 @@
   <form class="modal-content setup wizard hide js-test">
     <div class="modal-header">
       <div class="modal-close js-close">
-        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
       </div>
       <h1 class="modal-title"><%- @T('Email Account') %></h1>
     </div>
@@ -74,7 +74,7 @@
   <form class="modal-content setup wizard hide js-verify">
     <div class="modal-header">
       <div class="modal-close js-close">
-        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
       </div>
       <h1 class="modal-title"><%- @T('Email Account') %></h1>
     </div>
@@ -96,7 +96,7 @@
     <!-- /dummy to prevent chrome to ask for password save -->
     <div class="modal-header">
       <div class="modal-close js-close">
-        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
       </div>
       <h1 class="modal-title"><%- @T('Email Inbound') %></h1>
     </div>
@@ -123,7 +123,7 @@
     <!-- /dummy to prevent chrome to ask for password save -->
     <div class="modal-header">
         <div class="modal-close js-close">
-          <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+          <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
         </div>
         <h1 class="modal-title"><%- @T('Email Outbound') %></h1>
     </div>
diff --git a/app/assets/javascripts/app/views/channel/email_notification_wizard.jst.eco b/app/assets/javascripts/app/views/channel/email_notification_wizard.jst.eco
index 5b292ee7b..92ba3d009 100644
--- a/app/assets/javascripts/app/views/channel/email_notification_wizard.jst.eco
+++ b/app/assets/javascripts/app/views/channel/email_notification_wizard.jst.eco
@@ -3,7 +3,7 @@
   <form class="modal-content setup wizard hide js-probe">
     <div class="modal-header">
       <div class="modal-close js-close">
-        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
       </div>
       <h1 class="modal-title"><%- @T('Email Notification') %></h1>
     </div>
@@ -20,7 +20,7 @@
   <form class="modal-content setup wizard hide js-test">
     <div class="modal-header">
       <div class="modal-close js-close">
-        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
       </div>
       <h1 class="modal-title"><%- @T('Email Notification') %></h1>
     </div>
@@ -41,7 +41,7 @@
     <!-- /dummy to prevent chrome to ask for password save -->
     <div class="modal-header">
       <div class="modal-close js-close">
-        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
       </div>
       <h1 class="modal-title"><%- @T('Email Notification') %></h1>
     </div>
diff --git a/app/assets/javascripts/app/views/dashboard/first_steps_clues_content.jst.eco b/app/assets/javascripts/app/views/dashboard/first_steps_clues_content.jst.eco
index c56e43d7d..dfe7cf7a6 100644
--- a/app/assets/javascripts/app/views/dashboard/first_steps_clues_content.jst.eco
+++ b/app/assets/javascripts/app/views/dashboard/first_steps_clues_content.jst.eco
@@ -1,7 +1,7 @@
 <div class="modal-content">
   <div class="modal-arrow js-arrow"></div>
   <div class="modal-close js-close">
-    <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+    <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
   </div>
   <div class="modal-header"><%- @T(@headline) %></div>
   <div class="modal-body"><%- @text %></div>
diff --git a/app/assets/javascripts/app/views/generic/actions.jst.eco b/app/assets/javascripts/app/views/generic/actions.jst.eco
index 159851a1a..3fa46c5ec 100644
--- a/app/assets/javascripts/app/views/generic/actions.jst.eco
+++ b/app/assets/javascripts/app/views/generic/actions.jst.eco
@@ -1,10 +1,10 @@
 <div class="dropdown dropdown--actions">
   <div class="dropdown-toggle" id="userAction" data-toggle="dropdown">
     <% if @type isnt 'small': %>
-      <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
+      <%- @Icon('icon-cog', 'dropdown-icon') %>
       <label><%- @T('Action') %></label>
     <% end %>
-    <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
+    <%- @Icon('icon-arrow-down', 'icon-arrow-down') %>
   </div>
   <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="userAction">
     <% for item in @items: %>
diff --git a/app/assets/javascripts/app/views/generic/attachment.jst.eco b/app/assets/javascripts/app/views/generic/attachment.jst.eco
index cd5c88995..45b68bc1f 100644
--- a/app/assets/javascripts/app/views/generic/attachment.jst.eco
+++ b/app/assets/javascripts/app/views/generic/attachment.jst.eco
@@ -12,7 +12,7 @@
         <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
       </div>
       <div class="attachmentUpload-cancel js-cancel">
-        <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg></div><%- @T('Cancel Upload') %>
+        <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %></div><%- @T('Cancel Upload') %>
       </div>
     </div>
     <div class="attachmentUpload-progressBar" style="width: 0%"></div>
diff --git a/app/assets/javascripts/app/views/generic/attachment_item.jst.eco b/app/assets/javascripts/app/views/generic/attachment_item.jst.eco
index 1d8e9c1f9..42834a2ab 100644
--- a/app/assets/javascripts/app/views/generic/attachment_item.jst.eco
+++ b/app/assets/javascripts/app/views/generic/attachment_item.jst.eco
@@ -2,6 +2,6 @@
   <div class="attachment-name"><%= @fileName %></div>
   <div class="attachment-size"><%= @fileSize %></div>
   <div class="attachment-delete js-delete" data-id="<%= @store_id %>">
-    <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %>
+    <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %><%- @T('Delete File') %>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/attribute.jst.eco b/app/assets/javascripts/app/views/generic/attribute.jst.eco
index 5af10670c..951eb6f03 100644
--- a/app/assets/javascripts/app/views/generic/attribute.jst.eco
+++ b/app/assets/javascripts/app/views/generic/attribute.jst.eco
@@ -9,7 +9,7 @@
     <% end %>
     <% if @attribute.note: %>
     <div class="help-message" title="<%- @Ti( @attribute.note ) + ' ' %>">
-      <svg class="icon-help"><use xlink:href="#icon-help" /></svg>
+      <%- @Icon('icon-help', 'icon-help') %>
     </div>
     <% end %>
   </div>
diff --git a/app/assets/javascripts/app/views/generic/error/generic.jst.eco b/app/assets/javascripts/app/views/generic/error/generic.jst.eco
index 4ce46e3f0..6f36d6de8 100644
--- a/app/assets/javascripts/app/views/generic/error/generic.jst.eco
+++ b/app/assets/javascripts/app/views/generic/error/generic.jst.eco
@@ -1,4 +1,4 @@
 <div class="fullscreenMessage">
-  <svg class="icon-error icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+  <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
   <h2><%- @T('Status Code') %>: <%= @status %>. <%= @detail %></h2>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/error/not_found.jst.eco b/app/assets/javascripts/app/views/generic/error/not_found.jst.eco
index 19f720785..fb22fb00d 100644
--- a/app/assets/javascripts/app/views/generic/error/not_found.jst.eco
+++ b/app/assets/javascripts/app/views/generic/error/not_found.jst.eco
@@ -1,4 +1,4 @@
 <div class="flex fullscreenMessage">
-  <svg class="icon-error icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+  <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
   <h2><%- @T('Opps.. I\'m sorry, but I can\'t find this %s.', @objectName ) %></h2>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/error/unauthorized.jst.eco b/app/assets/javascripts/app/views/generic/error/unauthorized.jst.eco
index 3ad3a7033..de4bf0416 100644
--- a/app/assets/javascripts/app/views/generic/error/unauthorized.jst.eco
+++ b/app/assets/javascripts/app/views/generic/error/unauthorized.jst.eco
@@ -1,4 +1,4 @@
 <div class="flex fullscreenMessage">
-  <svg class="icon-error icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+  <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
   <h2><%- @T('Opps.. I\'m sorry, but you have insufficient rights to open this %s.', @objectName ) %></h2>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/radio.jst.eco b/app/assets/javascripts/app/views/generic/radio.jst.eco
index be4f998b2..968c8005d 100644
--- a/app/assets/javascripts/app/views/generic/radio.jst.eco
+++ b/app/assets/javascripts/app/views/generic/radio.jst.eco
@@ -2,8 +2,8 @@
 <% for row in @attribute.options: %>
     <label>
       <input type="radio" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %>> <%= row.name %> <% if row.note: %>- <%= row.note %><% end %>
-      <svg class="icon-radio"><use xlink:href="#icon-radio" /></svg>
-      <svg class="icon-radio-checked"><use xlink:href="#icon-radio-checked" /></svg>
+      <%- @Icon('icon-radio', 'icon-radio') %>
+      <%- @Icon('icon-radio-checked', 'icon-radio-checked') %>
     </label>
 <% end %>
 </div>
diff --git a/app/assets/javascripts/app/views/generic/searchable_select.jst.eco b/app/assets/javascripts/app/views/generic/searchable_select.jst.eco
index 2eb8e3f13..18ee3ccf0 100644
--- a/app/assets/javascripts/app/views/generic/searchable_select.jst.eco
+++ b/app/assets/javascripts/app/views/generic/searchable_select.jst.eco
@@ -16,7 +16,7 @@
     <span class="searchableSelect-autocomplete-invisible js-autocomplete-invisible"></span>
     <span class="searchableSelect-autocomplete-visible js-autocomplete-visible"></span>
   </div>
-  <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+  <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
   <div class="small loading icon"></div>
 </div>
 <ul class="dropdown-menu dropdown-menu-left js-optionsList" role="menu">
diff --git a/app/assets/javascripts/app/views/generic/select.jst.eco b/app/assets/javascripts/app/views/generic/select.jst.eco
index ede333fda..2e0afe04f 100644
--- a/app/assets/javascripts/app/views/generic/select.jst.eco
+++ b/app/assets/javascripts/app/views/generic/select.jst.eco
@@ -7,6 +7,6 @@
 <% end %>
   </select>
   <% if not @attribute.multiple: %>
-  <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+    <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
   <% end %>
 </div>
diff --git a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
index b567d4b46..9eeb2bcd3 100644
--- a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
+++ b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco
@@ -4,7 +4,7 @@
     <h2 class="sidebar-header-headline js-headline"><%- @T( item.head ) %></h2>
     <div class="sidebar-header-actions js-actions"></div>
     <div class="tabsSidebar-close">
-      <svg class="icon icon-long-arrow-right"><use xlink:href="#icon-long-arrow-right" /></svg>
+      <%- @Icon('icon-long-arrow-right', 'icon icon-long-arrow-right') %>
     </div>
   </div>
   <hr>
@@ -16,7 +16,7 @@
 <div class="tabsSidebar-tabs vertical justified">
 <% for item in @items: %>
   <div class="tabsSidebar-tab" data-tab="<%= item.name %>">
-    <svg class="icon"><use xlink:href="#icon-<%= item.icon %>" /></svg>
+    <%- @Icon("icon-#{item.icon}", 'icon') %>
   </div>
 <% end %>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/table.jst.eco b/app/assets/javascripts/app/views/generic/table.jst.eco
index cb04602a4..d20188ef8 100644
--- a/app/assets/javascripts/app/views/generic/table.jst.eco
+++ b/app/assets/javascripts/app/views/generic/table.jst.eco
@@ -5,8 +5,8 @@
       <th style="width: 40px" class="no-padding">
         <label class="input-replacement">
           <input type="checkbox" value="" name="bulk_all"/>
-          <svg class="icon-checkbox icon-unchecked"><use xlink:href="#icon-checkbox" /></svg>
-          <svg class="icon-checkbox-checked icon-checked"><use xlink:href="#icon-checkbox-checked" /></svg>
+          <%- @Icon('icon-checkbox', 'icon-checkbox icon-unchecked') %>
+          <%- @Icon('icon-checkbox-checked', 'icon-checkbox-checked icon-checked') %>
         </label>
       </th>
     <% end %>
@@ -42,8 +42,8 @@
       <td class="no-padding">
         <label class="input-replacement">
           <input type="checkbox" value="<%= object.id %>" name="bulk"/>
-          <svg class="icon-checkbox icon-unchecked"><use xlink:href="#icon-checkbox" /></svg>
-          <svg class="icon-checkbox-checked icon-checked"><use xlink:href="#icon-checkbox-checked" /></svg>
+          <%- @Icon('icon-checkbox', 'icon-checkbox icon-unchecked') %>
+          <%- @Icon('icon-checkbox-checked', 'icon-checkbox-checked icon-checked') %>
         </label>
       </td>
     <% end %>
@@ -51,8 +51,8 @@
       <td class="no-padding">
         <label class="input-replacement">
           <input type="radio" value="<%= object.id %>" name="radio"/>
-          <svg class="icon-radio icon-unchecked"><use xlink:href="#icon-radio" /></svg>
-          <svg class="icon-radio-checked icon-checked"><use xlink:href="#icon-radio-checked" /></svg>
+          <%- @Icon('icon-radio', 'icon-radio icon-unchecked') %>
+          <%- @Icon('icon-radio-checked', 'icon-radio-checked icon-checked') %>
         </label>
       </td>
     <% end %>
@@ -73,9 +73,7 @@
 
       <td <% if item.parentClass: %>class="<%= item.parentClass %>"<% end %>>
         <% if item.name is 'icon': %>
-          <svg class="<%- item.class %>">
-            <use xlink:href="#icon-priority" />
-          </svg>
+          <%- @Icon('icon-priority', item.class) %>
         <% else: %>
           <% if item.link: %>
             <a href="<%- item.link %>" <% if item.target: %>target="<%= item.target %>"<% end %>>
@@ -92,7 +90,7 @@
       </td>
     <% end %>
     <% if @destroy: %>
-      <td><svg class="icon-trash" data-type="destroy"><use xlink:href="#icon-trash" /></svg></td>
+      <td data-type="destroy"><%- @Icon('icon-trash', 'icon-trash') %></td>
     <% end %>
   </tr>
 <% end %>
diff --git a/app/assets/javascripts/app/views/generic/user_search/input.jst.eco b/app/assets/javascripts/app/views/generic/user_search/input.jst.eco
index cc967c379..2f3294fbc 100644
--- a/app/assets/javascripts/app/views/generic/user_search/input.jst.eco
+++ b/app/assets/javascripts/app/views/generic/user_search/input.jst.eco
@@ -1,7 +1,7 @@
 <div class="u-positionOrigin">
   <input type="hidden" name="<%- @attribute.name %>" value="<%= @attribute.value %>">
   <input name="<%- @attribute.name %>_completion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="<%- @attribute.placeholder %>" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
-  <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+  <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
 </div>
 
 <div class="dropdown-menu" aria-labelledby="customer_id">
diff --git a/app/assets/javascripts/app/views/generic/user_search/item_organization.jst.eco b/app/assets/javascripts/app/views/generic/user_search/item_organization.jst.eco
index 0eaf69839..b2310f89c 100644
--- a/app/assets/javascripts/app/views/generic/user_search/item_organization.jst.eco
+++ b/app/assets/javascripts/app/views/generic/user_search/item_organization.jst.eco
@@ -1,10 +1,10 @@
 <li class="recipientList-entry js-organization" data-organization-id="<%- @organization.id %>">
   <div class="recipientList-iconSpacer">
-    <svg class="recipientList-icon"><use xlink:href="#icon-organization" /></svg>
+    <%- @Icon('icon-organization', 'recipientList-icon') %>
   </div>
   <div class="recipientList-name">
     <%= @organization.displayName() %>
     <span class="recipientList-detail">- <%= @organization.member_ids.length %> <%- @T('People') %></span>
   </div>
-  <svg class="recipientList-arrow icon-arrow-right"><use xlink:href="#icon-arrow-right" /></svg>
+  <%- @Icon('icon-arrow-right', 'recipientList-arrow icon-arrow-right') %>
 </li>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/user_search/item_organization_members.jst.eco b/app/assets/javascripts/app/views/generic/user_search/item_organization_members.jst.eco
index aa83d9ae2..a4297ca9f 100644
--- a/app/assets/javascripts/app/views/generic/user_search/item_organization_members.jst.eco
+++ b/app/assets/javascripts/app/views/generic/user_search/item_organization_members.jst.eco
@@ -1,7 +1,7 @@
 <ul class="recipientList-organizationMembers hide" id="<%- @organization.id %>">
   <li class="recipientList-controls js-back">
     <div class="btn btn--action btn--onDark">
-      <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
+      <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
       <span class="btn-label"><%- @T('Back') %></span>
     </div>
 </ul>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/user_search/item_user.jst.eco b/app/assets/javascripts/app/views/generic/user_search/item_user.jst.eco
index 42b9b3396..0cd3c357d 100644
--- a/app/assets/javascripts/app/views/generic/user_search/item_user.jst.eco
+++ b/app/assets/javascripts/app/views/generic/user_search/item_user.jst.eco
@@ -1,6 +1,6 @@
 <li class="recipientList-entry js-user" data-user-id="<%= @user.id %>">
   <div class="recipientList-iconSpacer">
-    <svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg>
+    <%- @Icon('icon-user', 'recipientList-icon') %>
   </div>
   <div class="recipientList-name">
     <%= @user.displayName() %>
diff --git a/app/assets/javascripts/app/views/generic/user_search/new_user.jst.eco b/app/assets/javascripts/app/views/generic/user_search/new_user.jst.eco
index 970f7d780..5972adbc7 100644
--- a/app/assets/javascripts/app/views/generic/user_search/new_user.jst.eco
+++ b/app/assets/javascripts/app/views/generic/user_search/new_user.jst.eco
@@ -1,6 +1,6 @@
 <li class="recipientList-entry recipientList--new js-user-new" data-user-id="new">
   <div class="recipientList-iconSpacer">
-    <svg class="recipientList-icon"><use xlink:href="#icon-plus" /></svg>
+    <%- @Icon('icon-plus', 'recipientList-icon') %>
   </div>
   <div class="recipientList-name">
     <%- @T('Create new Customer') %>
diff --git a/app/assets/javascripts/app/views/getting_started/admin.jst.eco b/app/assets/javascripts/app/views/getting_started/admin.jst.eco
index a1bdfc4ad..ea615d21c 100644
--- a/app/assets/javascripts/app/views/getting_started/admin.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/admin.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
   <form class="setup wizard js-admin">
     <div class="wizard-slide">
       <h2><%- @T('Administrator Account') %></h2>
diff --git a/app/assets/javascripts/app/views/getting_started/agent.jst.eco b/app/assets/javascripts/app/views/getting_started/agent.jst.eco
index c785bfd25..236aaeb9d 100644
--- a/app/assets/javascripts/app/views/getting_started/agent.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/agent.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
   <form class="setup wizard js-agent">
     <div class="wizard-slide">
       <h2><%- @T('Invite Colleagues') %></h2>
diff --git a/app/assets/javascripts/app/views/getting_started/auto_wizard_enabled.jst.eco b/app/assets/javascripts/app/views/getting_started/auto_wizard_enabled.jst.eco
index ff62aca03..d0cce43a0 100644
--- a/app/assets/javascripts/app/views/getting_started/auto_wizard_enabled.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/auto_wizard_enabled.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
   <div class="setup wizard">
     <div class="wizard-slide">
       <div class="wizard-body vertical centered">
diff --git a/app/assets/javascripts/app/views/getting_started/auto_wizard_failed.jst.eco b/app/assets/javascripts/app/views/getting_started/auto_wizard_failed.jst.eco
index 57f029605..e38f8076b 100644
--- a/app/assets/javascripts/app/views/getting_started/auto_wizard_failed.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/auto_wizard_failed.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
   <div class="setup wizard">
     <div class="wizard-slide">
       <div class="wizard-body vertical centered">
diff --git a/app/assets/javascripts/app/views/getting_started/auto_wizard_splash.jst.eco b/app/assets/javascripts/app/views/getting_started/auto_wizard_splash.jst.eco
index 835d635f4..25a6b2ef2 100644
--- a/app/assets/javascripts/app/views/getting_started/auto_wizard_splash.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/auto_wizard_splash.jst.eco
@@ -1,3 +1,3 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/getting_started/base.jst.eco b/app/assets/javascripts/app/views/getting_started/base.jst.eco
index 590790646..17f32195c 100644
--- a/app/assets/javascripts/app/views/getting_started/base.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/base.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
   <form class="setup wizard js-base">
     <div class="wizard-slide">
       <h2><%- @T('Organization') %></h2>
diff --git a/app/assets/javascripts/app/views/getting_started/channel.jst.eco b/app/assets/javascripts/app/views/getting_started/channel.jst.eco
index a3665886d..ea9a8dee3 100644
--- a/app/assets/javascripts/app/views/getting_started/channel.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/channel.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
   <form class="setup wizard js-channel">
     <div class="wizard-slide">
       <h2><%- @T('Connect Channels') %></h2>
diff --git a/app/assets/javascripts/app/views/getting_started/email.jst.eco b/app/assets/javascripts/app/views/getting_started/email.jst.eco
index d8bef93fe..1a8426fe5 100644
--- a/app/assets/javascripts/app/views/getting_started/email.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/email.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
 
   <form class="setup wizard js-intro">
     <!-- dummy to prevent chrome to ask for password save -->
diff --git a/app/assets/javascripts/app/views/getting_started/email_notification.jst.eco b/app/assets/javascripts/app/views/getting_started/email_notification.jst.eco
index f94dced0c..885583d23 100644
--- a/app/assets/javascripts/app/views/getting_started/email_notification.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/email_notification.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
 
   <form class="setup wizard js-outbound">
     <!-- dummy to prevent chrome to ask for password save -->
diff --git a/app/assets/javascripts/app/views/getting_started/email_pre_configured.jst.eco b/app/assets/javascripts/app/views/getting_started/email_pre_configured.jst.eco
index f88cd561f..b3e98a256 100644
--- a/app/assets/javascripts/app/views/getting_started/email_pre_configured.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/email_pre_configured.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
   <form class="setup wizard js-channel">
     <div class="wizard-slide">
       <h2><%- @T('Connect Channels') %></h2>
diff --git a/app/assets/javascripts/app/views/getting_started/finish.jst.eco b/app/assets/javascripts/app/views/getting_started/finish.jst.eco
index f7f7ffdf2..5697e8f7e 100644
--- a/app/assets/javascripts/app/views/getting_started/finish.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/finish.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
   <form class="setup wizard">
     <div class="wizard-slide">
       <h2><%- @T('Setup Finished') %></h2>
diff --git a/app/assets/javascripts/app/views/getting_started/intro.jst.eco b/app/assets/javascripts/app/views/getting_started/intro.jst.eco
index c8152006b..708960bf5 100644
--- a/app/assets/javascripts/app/views/getting_started/intro.jst.eco
+++ b/app/assets/javascripts/app/views/getting_started/intro.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
   <div class="setup wizard js-start">
     <div class="wizard-slide">
       <div class="wizard-body vertical centered">
diff --git a/app/assets/javascripts/app/views/import/index.jst.eco b/app/assets/javascripts/app/views/import/index.jst.eco
index 12cdbf8fa..731700f15 100644
--- a/app/assets/javascripts/app/views/import/index.jst.eco
+++ b/app/assets/javascripts/app/views/import/index.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
   <div class="import wizard">
     <div class="wizard-slide vertical">
       <h2><%- @T('Import from') %></h2>
diff --git a/app/assets/javascripts/app/views/import/otrs.jst.eco b/app/assets/javascripts/app/views/import/otrs.jst.eco
index 0b00f7d8e..f9a4fc12e 100644
--- a/app/assets/javascripts/app/views/import/otrs.jst.eco
+++ b/app/assets/javascripts/app/views/import/otrs.jst.eco
@@ -1,5 +1,5 @@
 <div class="main flex vertical centered darkBackground">
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
   <div class="import wizard">
     <div class="wizard-slide vertical" data-slide="otrs-prepare">
       <h2><%- @T('Create OTRS Migration Plugin') %></h2>
@@ -18,7 +18,7 @@
         <p>
           <%- @T('Download and install your personalised OTRS Migration Plugin on your OTRS System') %>:
         </p>
-        <a class="btn btn--primary btn--download js-download" download><svg class="icon-download"><use xlink:href="#icon-download" /></svg> <%- @T('Personal Migration Plugin') %></a>
+        <a class="btn btn--primary btn--download js-download" download><%- @Icon('icon-download', 'icon-download') %> <%- @T('Personal Migration Plugin') %></a>
       </div>
       <div class="wizard-controls horizontal center">
         <a class="btn btn--text btn--secondary" href="#import"><%- @T('Go Back') %></a>
@@ -37,8 +37,8 @@
             <input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.example.com" name="url">
             <div class="input-feedback centered">
               <div class="small loading icon"></div>
-              <svg class="icon icon-error"><use xlink:href="#icon-diagonal-cross" /></svg>
-              <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
+              <%- @Icon('icon-diagonal-cross', 'icon icon-error') %>
+              <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
             </div>
           </div>
           <div class="error otrs-link-error"></div>
@@ -60,7 +60,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress value="0.3"></progress></div><!-- if there is no max, the value is between 0..1 -->
-                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
+                <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
               </div>
           </tr>
           <tr class="js-base">
@@ -69,7 +69,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress max="42" value="42"></progress></div>
-                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
+                <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
               </div>
           </tr>
           <tr class="js-user">
@@ -78,7 +78,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress max="42" value="42"></progress></div>
-                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
+                <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
               </div>
           </tr>
           <tr class="js-ticket">
@@ -87,7 +87,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress max="134318" value="134318"></progress></div>
-                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
+                <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
               </div>
           </tr>
         </table>
diff --git a/app/assets/javascripts/app/views/layout_ref/clue_content.jst.eco b/app/assets/javascripts/app/views/layout_ref/clue_content.jst.eco
index 9fc2c75f7..dc1ff9de0 100644
--- a/app/assets/javascripts/app/views/layout_ref/clue_content.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/clue_content.jst.eco
@@ -1,7 +1,7 @@
 <div class="modal-content">
   <div class="modal-arrow js-arrow"></div>
   <div class="modal-close js-close">
-    <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+    <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
   </div>
   <div class="modal-header"><%= @headline %></div>
   <div class="modal-body"><%- @text %></div>
diff --git a/app/assets/javascripts/app/views/layout_ref/communication_reply.jst.eco b/app/assets/javascripts/app/views/layout_ref/communication_reply.jst.eco
index 61bcb7e23..6d4e536c4 100644
--- a/app/assets/javascripts/app/views/layout_ref/communication_reply.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/communication_reply.jst.eco
@@ -20,14 +20,14 @@
               <div class="attachment-name u-highlight">sega-genesis-box.gif</div>
               <div class="attachment-size">2.4mb</div>
               <div class="attachment-delete js-delete align-right u-clickable">
-                <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %>
+                <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %><%- @T('Delete File') %>
               </div>
             </div>
             <div class="attachment">
               <div class="attachment-name u-highlight">license-key.txt</div>
               <div class="attachment-size">7kb</div>
               <div class="attachment-delete js-delete align-right u-clickable">
-                <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %>
+                <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %><%- @T('Delete File') %>
               </div>
             </div>
           </div> -->
@@ -45,7 +45,7 @@
                   <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
                 </div>
                 <div class="attachmentUpload-cancel js-cancel">
-                  <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Cancel Upload') %>
+                  <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %></svg><%- @T('Cancel Upload') %>
                 </div>
               </div>
               <div class="attachmentUpload-progressBar" style="width: 0%"></div>
diff --git a/app/assets/javascripts/app/views/layout_ref/content.jst.eco b/app/assets/javascripts/app/views/layout_ref/content.jst.eco
index d9cad373e..81c3e2001 100644
--- a/app/assets/javascripts/app/views/layout_ref/content.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/content.jst.eco
@@ -81,7 +81,7 @@
 
             <div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown">
               <input id="customer_id_autocompletion2" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organization/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
-              <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+              <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
             </div>
 
             <div class="dropdown-menu" aria-labelledby="customer_id">
@@ -89,26 +89,26 @@
               <ul class="recipientList" role="menu">
                 <li class="recipientList-entry js-organization" data-organization-id="AlbrechtBertschlerGmbG">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-team" /></svg>
+                    <%- @Icon('icon-team', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Albrecht &amp; Bertschler GmbH
                     <span class="recipientList-detail">- 4 Personen</span>
                   </div>
-                  <svg class="icon-arrow-right recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg>
+                  <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
                     <li class="recipientList-entry js-organization" data-organization-id="BENCHMARKhumanresources">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-organization" /></svg>
+                    <%- @Icon('icon-organization', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     BENCHMARK human resources
                     <span class="recipientList-detail">- 2 Personen</span>
                   </div>
-                  <svg class="icon-arrow-right recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg>
+                  <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg>
+                    <%- @Icon('icon-user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Belinda Matt
@@ -117,7 +117,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg>
+                    <%- @Icon('icon-user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Benjamin Wahlers
@@ -126,7 +126,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg>
+                    <%- @Icon('icon-user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Benjamin Weiß
@@ -135,7 +135,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-organization" /></svg>
+                    <%- @Icon('icon-organization', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Benteler SGL Composite Technology GmbH
@@ -144,37 +144,37 @@
 
                 <li class="recipientList-entry js-organization">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-team" /></svg>
+                    <%- @Icon('icon-team', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Support Team Berlin
                     <span class="recipientList-detail">- 5 Personen</span>
                   </div>
-                  <svg class="icon-arrow-right recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg>
+                  <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
 
                 <li class="recipientList-entry js-organization">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-organization" /></svg>
+                    <%- @Icon('icon-organization', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Bernecker + Rainer Industrie-Elektronik Ges.m.b.H.
                     <span class="recipientList-detail">- 3 Personen</span>
                   </div>
-                  <svg class="icon-arrow-right recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg>
+                  <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
 
                 <li class="recipientList-entry js-organization">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-organization" /></svg>
+                    <%- @Icon('icon-organization', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Bertsch Ecopower GmbH
                     <span class="recipientList-detail">- 1 Person</span>
                   </div>
-                  <svg class="icon-arrow-right recipientList-arrow"><use xlink:href="#icon-arrow-right" /></svg>
+                  <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
 
                 <li class="recipientList-entry recipientList--new u-clickable horizontal center">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-plus" /></svg>
+                    <%- @Icon('icon-plus', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     <%- @T('Create new Customer') %>
@@ -184,13 +184,13 @@
               <ul class="recipientList-organizationMembers hide" id="AlbrechtBertschlerGmbG">
                 <li class="recipientList-controls js-back">
                   <div class="btn btn--action btn--onDark">
-                    <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
+                    <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
                     <span class="btn-label"><%- @T('Back') %></span>
                   </div>
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg>
+                    <%- @Icon('icon-user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Andreas Kramer
@@ -199,7 +199,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg>
+                    <%- @Icon('icon-user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Belinda Matt
@@ -208,7 +208,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg>
+                    <%- @Icon('icon-user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Damian Sprengler
@@ -217,24 +217,24 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg>
+                    <%- @Icon('icon-user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Katharina Nussman
                     <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
                   </div>
-              </ul>              
+              </ul>
 
               <ul class="recipientList-organizationMembers hide" id="BENCHMARKhumanresources">
                 <li class="recipientList-controls js-back">
                   <div class="btn btn--action btn--onDark">
-                    <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
+                    <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
                     <span class="btn-label"><%- @T('Back') %></span>
                   </div>
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg>
+                    <%- @Icon('icon-user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Hubert Lang
@@ -243,7 +243,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <svg class="recipientList-icon"><use xlink:href="#icon-user" /></svg>
+                    <%- @Icon('icon-user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Mario Steibel
diff --git a/app/assets/javascripts/app/views/layout_ref/error.jst.eco b/app/assets/javascripts/app/views/layout_ref/error.jst.eco
index ee8505fa4..c2e59fca4 100644
--- a/app/assets/javascripts/app/views/layout_ref/error.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/error.jst.eco
@@ -1,4 +1,4 @@
 <div class="fullscreenMessage">
-  <svg class="icon-error icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+  <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
   <h2><%- @T('Status Code') %>: 1234. Check your internet connection...</h2>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/highlight.jst.eco b/app/assets/javascripts/app/views/layout_ref/highlight.jst.eco
index 01a2195be..1236ceeee 100644
--- a/app/assets/javascripts/app/views/layout_ref/highlight.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/highlight.jst.eco
@@ -3,11 +3,11 @@
   <div class="ticketZoom">
     <div class="ticketZoom-controls">
       <div class="btn btn--action btn--split--first js-highlight">
-        <svg class="icon icon-marker js-highlight-icon"><use xlink:href="#icon-marker" /></svg>
+        <%- @Icon('icon-marker', 'icon icon-marker js-highlight-icon') %>
       </div>
       <div class="dropdown dropdown--actions">
         <div class="btn btn--action btn--split--last btn--slim" id="highlight" data-toggle="dropdown" aria-expanded="true">
-          <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
+          <%- @Icon('icon-arrow-down', 'icon-arrow-down') %>
         </div>
         <ul class="dropdown-menu dropdown-menu-right" role="menu">
           <% for entry, i in @colors: %>
@@ -30,11 +30,11 @@
         <ul class="pagination">
           <li>
             <a class="btn btn--action btn--split--first" data-from="0" data-type="page">
-              <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
+              <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
             </a>
           <li>
             <a class="btn btn--action btn--split--last" href="#" data-from="1" data-type="page">
-              <svg class="icon-arrow-right"><use xlink:href="#icon-arrow-right" /></svg>
+              <%- @Icon('icon-arrow-right', 'icon-arrow-right') %>
             </a>
         </ul>
       </li>
@@ -55,11 +55,11 @@
       <ul class="pagination">
         <li>
           <a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
-            <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
+            <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
           </a>
         <li>
           <a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
-            <svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
+            <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
           </a>
       </ul>
     </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco b/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
index 47162c0a7..1259351a5 100644
--- a/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
@@ -57,7 +57,7 @@
           <option>Znuny</option>
           <option>Max &amp; Moritz</option>
         </select>
-        <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
       </div>
     </div>
 
diff --git a/app/assets/javascripts/app/views/layout_ref/insufficient_rights.jst.eco b/app/assets/javascripts/app/views/layout_ref/insufficient_rights.jst.eco
index 5eb890d81..cecd2b0d4 100644
--- a/app/assets/javascripts/app/views/layout_ref/insufficient_rights.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/insufficient_rights.jst.eco
@@ -1,4 +1,4 @@
 <div class="flex fullscreenMessage">
-  <svg class="icon-error icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+  <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
   <h2>Opps.. I'm sorry, but you have insufficient rights to open this ticket.</h2>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco b/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
index 33de87730..6a133c378 100644
--- a/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco
@@ -6,7 +6,7 @@
         <div class="modal-content">
           <div class="modal-header">
             <div class="modal-close js-close">
-              <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+              <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
             </div>
             <h1 class="modal-title">Edit Customer</h1>
           </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco b/app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco
index bd526112e..312e04b19 100644
--- a/app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco
@@ -16,11 +16,11 @@
 
   <div class="merge-control">
     <div class="merge-arrow">
-      <svg class="line-arrow icon-line-left-arrow"><use xlink:href="#icon-line-left-arrow" /></svg>
+      <%- @Icon('icon-line-left-arrow', 'line-arrow icon-line-left-arrow') %>
     </div>
     <div class="merge-control-input">is equal</div>
     <div class="merge-arrow">
-      <svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
+      <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
     </div>
   </div>
 
@@ -38,17 +38,17 @@
 
   <div class="merge-control">
     <div class="merge-arrow">
-      <svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
+      <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
     </div>
     <div class="merge-control-input u-positionOrigin">
       <select id="a" class="form-control form-control--small">
         <option>replace</option>
         <option>ignore</option>
       </select>
-      <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+      <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
     </div>
     <div class="merge-arrow">
-      <svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
+      <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
     </div>
   </div>
 
@@ -68,7 +68,7 @@
   <div class="merge-controls">
     <div class="merge-control">
       <div class="merge-arrow">
-        <svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
+        <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
       </div>
       <div class="merge-control-input u-positionOrigin">
         <select id="a" class="form-control form-control--small">
@@ -76,15 +76,15 @@
           <option selected>add</option>
           <option>ignore</option>
         </select>
-        <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
       </div>
       <div class="merge-arrow">
-        <svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
+        <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
       </div>
     </div>
     <div class="merge-control">
       <div class="merge-arrow">
-        <svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
+        <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
       </div>
       <div class="merge-control-input u-positionOrigin">
         <select id="a" class="form-control form-control--small">
@@ -92,10 +92,10 @@
           <option selected>add</option>
           <option>ignore</option>
         </select>
-        <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
       </div>
       <div class="merge-arrow">
-        <svg class="line-arrow icon-line-right-arrow"><use xlink:href="#icon-line-right-arrow" /></svg>
+        <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco b/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco
index 61cbd5a39..504673947 100644
--- a/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/organization_profile.jst.eco
@@ -4,9 +4,9 @@
     <div class="profile-section vertical centered">
       <div class="align-right profile-action dropdown dropdown--actions">
         <div class="dropdown-toggle" id="organizationProfile" data-toggle="dropdown">
-          <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
+          <%- @Icon('icon-cog', 'dropdown-icon') %>
           <label>Aktion</label>
-          <svg class="icon-arrow-down"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
+          <%- @Icon('icon-arrow-down', 'icon-arrow-down') %>
         </div>
         <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="organizationProfile">
           <li role="presentation"><a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>
@@ -16,7 +16,7 @@
         </ul>
       </div>
       <div class="profile-organizationIcon">
-        <svg class="icon-organization"><use xlink:href="#icon-organization" /></svg>
+        <%- @Icon('icon-organization', 'icon-organization') %>
       </div>
       <h1>Steuerbüro C. Kaik</h1>
     </div>
diff --git a/app/assets/javascripts/app/views/link/info.jst.eco b/app/assets/javascripts/app/views/link/info.jst.eco
index e91a4b8c3..6fcc498d4 100644
--- a/app/assets/javascripts/app/views/link/info.jst.eco
+++ b/app/assets/javascripts/app/views/link/info.jst.eco
@@ -6,14 +6,14 @@
     <% for item in @links[type]: %>
     <li class="task">
       <div class="icon-holder">
-        <svg class="<%- item.icon() %>"><use xlink:href="#icon-priority" /></svg>
+        <%- @Icon('icon-priority', item.icon()) %>
       </div>
       <div class="task-text">
         <a class="name ticket-popover" data-id="<%- item.id %>" href="#ticket/zoom/<%= item.id %>"><%= item.title %></a>
         <%- @humanTime(item.created_at) %>
       </div>
       <div class="sidebar-list-item-delete js-delete" data-object="Ticket" data-object-id="<%= item.id %>" data-link-type="<%= type %>" data-type="remove">
-        <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %>
       </div>
     <% end %>
   </ol>
diff --git a/app/assets/javascripts/app/views/login.jst.eco b/app/assets/javascripts/app/views/login.jst.eco
index 25fefdedd..9b85f4a7e 100644
--- a/app/assets/javascripts/app/views/login.jst.eco
+++ b/app/assets/javascripts/app/views/login.jst.eco
@@ -40,7 +40,7 @@
           <div class="auth-providers">
             <% for auth_provider in @auth_providers: %>
               <a class="auth-provider auth-provider--<%= auth_provider.class %>" href="<%= auth_provider.url %>">
-                <svg class="provider-icon"><use xlink:href="#icon-<%= auth_provider.class %>-button" /></svg>
+                <%- @Icon("icon-#{auth_provider.class}-button", 'provider-icon') %>
                 <span class="provider-name"><%- @T( auth_provider.name ) %></span>
               </a>
             <% end %>
@@ -65,8 +65,8 @@
     </div>
   </div>
   <div class="poweredBy">
-    <svg class="logo icon-logo"><use xlink:href="#icon-logo" /></svg>
+    <%- @Icon('icon-logo', 'logo icon-logo') %>
     <%- @T("Powered by") %>
-    <svg class="logotype icon-logotype"><use xlink:href="#icon-logotype" /></svg>
+    <%- @Icon('icon-logotype', 'logotype icon-logotype') %>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/modal.jst.eco b/app/assets/javascripts/app/views/modal.jst.eco
index f3d616901..66b8b3875 100644
--- a/app/assets/javascripts/app/views/modal.jst.eco
+++ b/app/assets/javascripts/app/views/modal.jst.eco
@@ -4,7 +4,7 @@
       <div class="modal-header">
   <% if @close: %>
         <div class="modal-close js-close">
-          <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+          <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
         </div>
   <% end %>
         <h1 class="modal-title"><%- @T( @head ) %></h1>
diff --git a/app/assets/javascripts/app/views/navigation.jst.eco b/app/assets/javascripts/app/views/navigation.jst.eco
index 113c10e9e..95833fca9 100644
--- a/app/assets/javascripts/app/views/navigation.jst.eco
+++ b/app/assets/javascripts/app/views/navigation.jst.eco
@@ -1,13 +1,13 @@
 <form class="search">
   <div class="search-holder">
     <input id="global-search" type="search" autocomplete="off">
-    <svg class="icon-magnifier"><use xlink:href="#icon-magnifier" /></svg>
+    <%- @Icon('icon-magnifier', 'icon-magnifier') %>
     <div class="empty-search">
-      <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
     </div>
   </div>
   <div class="logo js-toggleNavigation">
-    <svg class="icon-logo"><use xlink:href="#icon-logo" /></svg>
+    <%- @Icon('icon-logo', 'icon-logo') %>
     <div class="activity-counter js-counter"></div>
   </div>
   <ul id="global-search-result" class="custom-dropdown-menu" role="menu"></ul>
diff --git a/app/assets/javascripts/app/views/navigation/menu.jst.eco b/app/assets/javascripts/app/views/navigation/menu.jst.eco
index 9310fab08..829a882b9 100644
--- a/app/assets/javascripts/app/views/navigation/menu.jst.eco
+++ b/app/assets/javascripts/app/views/navigation/menu.jst.eco
@@ -2,11 +2,11 @@
   <% if item.child: %>
   <li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>">
     <a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown">
-        <svg class="nav-icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
+        <%- @Icon("icon-#{item.class}", 'nav-icon') %>
         <span class="nav-item-name flex">
           <%- @T( item.name ) %>
         </span>
-        <svg class="dropdown-icon icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
+        <%- @Icon("icon-arrow-down", 'dropdown-icon icon-arrow-down') %>
     </a>
     <ul class="dropdown-menu dropdown-menu--light">
       <% for item in item.child: %>
@@ -23,7 +23,7 @@
   <% else: %>
     <li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>">
       <a class="horizontal center" href="<%= item.target %>">
-        <svg class="nav-icon"><use xlink:href="#icon-<%= item.class %>" /></svg>
+        <%- @Icon("icon-#{item.class}", 'nav-icon') %>
         <span class="nav-item-name flex">
           <%- @T( item.name ) %>
         </span>
diff --git a/app/assets/javascripts/app/views/navigation/personal.jst.eco b/app/assets/javascripts/app/views/navigation/personal.jst.eco
index 2a53d2aaf..f83d4d995 100644
--- a/app/assets/javascripts/app/views/navigation/personal.jst.eco
+++ b/app/assets/javascripts/app/views/navigation/personal.jst.eco
@@ -6,7 +6,7 @@
         <% if item.class is 'user': %>
           <span class="js-avatar"></span>
         <% else: %>
-          <svg class="user-menu-icon icon-plus"><use xlink:href="#icon-plus" /></svg>
+          <%- @Icon('icon-plus', 'user-menu-icon icon-plus') %>
         <% end %>
       </a>
       <ul class="dropdown-menu dropdown-menu--light" role="menu">
@@ -21,7 +21,7 @@
             <a href="<%= item.target %>" class="horizontal center">
               <span class="flex u-textTruncate"><% if item.translate: %><%- @T( item.name ) %><% else: %><%= item.name %><% end %></span>
               <% if item['count'] isnt undefined: %><span class="badge count"><%= item['count'] %></span><% end %>
-              <% if item.iconClass: %><svg class="icon-<%= item.iconClass %>"><use xlink:href="#icon-<%= item.iconClass %>" /></svg><% end %>
+              <% if item.iconClass: %><%- @Icon("icon-#{item.iconClass}", "icon-#{item.iconClass}") %><% end %>
             </a>
           </li>
         <% end %>
@@ -30,7 +30,7 @@
   <% else: %>
     <li class="settings <% if @active_tab[item.target] : %>active<% end %>">
       <a class="list-button fit horizontal centered" href="<%= item.target %>" title="<%- @Ti( item.name ) %>">
-        <svg class="user-menu-icon icon-cog"><use xlink:href="#icon-cog" /></svg>
+        <%- @Icon('icon-cog', 'user-menu-icon icon-cog') %>
       </a>
     </li>
   <% end %>
diff --git a/app/assets/javascripts/app/views/navigation/result.jst.eco b/app/assets/javascripts/app/views/navigation/result.jst.eco
index ed0d6404d..fce8d9146 100644
--- a/app/assets/javascripts/app/views/navigation/result.jst.eco
+++ b/app/assets/javascripts/app/views/navigation/result.jst.eco
@@ -5,7 +5,7 @@
     <li>
       <a href="<%- item.url %>" class="nav-tab nav-tab--search <%= item.class %>" data-id="<%= item.id %>">
         <div class="nav-tab-icon">
-          <svg class="icon icon-<%= item.iconClass %>"><use xlink:href="#icon-<%= item.iconClass %>" /></svg>
+          <%- @Icon("icon-#{item.iconClass}", "icon icon-#{item.iconClass}") %>
         </div>
         <span class="nav-tab-name flex u-textTruncate"><%= item.display %></span>
       </a>
diff --git a/app/assets/javascripts/app/views/organization_profile/object.jst.eco b/app/assets/javascripts/app/views/organization_profile/object.jst.eco
index 413d80186..34610fe13 100644
--- a/app/assets/javascripts/app/views/organization_profile/object.jst.eco
+++ b/app/assets/javascripts/app/views/organization_profile/object.jst.eco
@@ -1,7 +1,7 @@
 <div class="profile-section vertical centered">
   <div class="align-right profile-action js-action"></div>
   <div class="profile-organizationIcon">
-    <svg class="icon-organization"><use xlink:href="#icon-organization" /></svg>
+    <%- @Icon('icon-organization', 'icon-organization') %>
   </div>
   <h1><%= @organization.displayName() %></h1>
 </div>
diff --git a/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco b/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco
index ee503ead9..f380689ca 100644
--- a/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco
+++ b/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco
@@ -1,6 +1,6 @@
 <div class="avatar-holder">
   <span class="avatar size-50" data-avatar-id="<%- @avatar.id %>" style="background-image: url(<%- @src %>)"></span>
   <div class="avatar-delete">
-    <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+    <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/profile/avatar.jst.eco b/app/assets/javascripts/app/views/profile/avatar.jst.eco
index ce720a3bb..06a0b69dc 100644
--- a/app/assets/javascripts/app/views/profile/avatar.jst.eco
+++ b/app/assets/javascripts/app/views/profile/avatar.jst.eco
@@ -22,7 +22,7 @@
       <span class="avatar size-80 <% if avatar.default: %>is-active<% end %>" data-avatar-id="<%- avatar.id %>" style="background-image: url(<%- avatar.content %>)"></span>
       <% if avatar.deletable: %>
         <div class="avatar-delete">
-          <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+          <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
         </div>
       <% end %>
     <% end %>
diff --git a/app/assets/javascripts/app/views/profile/devices.jst.eco b/app/assets/javascripts/app/views/profile/devices.jst.eco
index 347b3ffc5..27b00218c 100644
--- a/app/assets/javascripts/app/views/profile/devices.jst.eco
+++ b/app/assets/javascripts/app/views/profile/devices.jst.eco
@@ -21,7 +21,7 @@
         <td><%= device.name %></td>
         <td><%= device.location %></td>
         <td><%- @humanTime(device.updated_at) %></td>
-        <td><a href="#" data-device-id="<%- device.id %>" data-type="delete" title="<%- @Ti('Delete') %>"<% if device.current: %>disabled<% end %>><svg class="icon-trash"><use xlink:href="#icon-trash"></use></svg></a></td>
+        <td><a href="#" data-device-id="<%- device.id %>" data-type="delete" title="<%- @Ti('Delete') %>"<% if device.current: %>disabled<% end %>><%- @Icon('icon-trash', 'icon-trash') %></a></td>
       </tr>
     <% end %>
     <tbody>
diff --git a/app/assets/javascripts/app/views/session.jst.eco b/app/assets/javascripts/app/views/session.jst.eco
index 4d156e5ac..2a8bbb392 100644
--- a/app/assets/javascripts/app/views/session.jst.eco
+++ b/app/assets/javascripts/app/views/session.jst.eco
@@ -20,7 +20,7 @@
       <td title="<%= session.data.remote_id %>"><% if session.data.geo && session.data.geo.country_name: %><%= session.data.geo.country_name %> <%= session.data.geo.city_name %><% else: %><%= session.data.remote_id %><% end %></td>
       <td><%- @humanTime(session.created_at) %></td>
       <td><%- @humanTime(session.updated_at) %></td>
-      <td><a href="#" data-session-id="<%- session.id %>" data-type="delete" title="<%- @Ti('Delete') %>"><svg class="icon-trash" data-type="destroy"><use xlink:href="#icon-trash"></use></svg></a></td>
+      <td><a href="#" data-session-id="<%- session.id %>" data-type="delete" title="<%- @Ti('Delete') %>"><%- @Icon('icon-trash', 'icon-trash') %></a></td>
     </tr>
     <% end %>
   </tbody>
diff --git a/app/assets/javascripts/app/views/task_widget_tasks.jst.eco b/app/assets/javascripts/app/views/task_widget_tasks.jst.eco
index 36e3cc0c5..30cf4f238 100644
--- a/app/assets/javascripts/app/views/task_widget_tasks.jst.eco
+++ b/app/assets/javascripts/app/views/task_widget_tasks.jst.eco
@@ -1,23 +1,19 @@
 <% for item in @item_list: %>
   <a href="<%- item.data.url %>" title="<%= item.data.title %>" class="nav-tab task <%= item.data.class %><% if item.task.active: %> is-active<% end %><% if item.task.notify: %> is-modified<% end %>" data-key="<%- item.task.key %>">
     <div class="nav-tab-icon">
-      <svg class="icon icon-<%= item.data.iconClass %>">
-        <% if item.task.notify && item.data.iconClass is 'priority': %>
-        <use xlink:href="#icon-priority-modified-outer-circle" />
-        <% else: %>
-        <use xlink:href="#icon-<%= item.data.iconClass %>" />
-        <% end %>
-      </svg>
       <% if item.task.notify && item.data.iconClass is 'priority': %>
-      <svg class="icon modified-inner-circle icon-<%= item.data.iconClass %>">
-        <use xlink:href="#icon-priority-modified-inner-circle" />
-      </svg>
+        <%- @Icon('icon-priority-modified-outer-circle', "icon icon-#{item.data.iconClass}") %>
+      <% else: %>
+        <%- @Icon("icon-#{item.data.iconClass}", "icon icon-#{item.data.iconClass}") %>
+      <% end %>
+      <% if item.task.notify && item.data.iconClass is 'priority': %>
+        <%- @Icon('icon-priority-modified-inner-circle', "icon modified-inner-circle icon-#{item.data.iconClass}") %>
       <% end %>
     </div>
     <div class="nav-tab-name u-textTruncate flex"><%= item.data.head %></div>
     <div class="nav-tab-close js-close" title="<%- @Ti('close') %>">
       <div class="nav-tab-close-inner">
-        <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+        <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
       </div>
     </div>
   </a>
diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
index ecc651b76..521f7b77d 100644
--- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
@@ -35,7 +35,7 @@
           <option value="2">open</option>
           <option value="3">pending</option>
         </select>
-        <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
       </div>
       <div class="form-group is-changed">
         <label for="update_ticket_1_priority_id123" class="input-group-addon u-clickable">Priority</label>
@@ -44,7 +44,7 @@
           <option value="2" selected="">2 normal</option>
           <option value="3">3 high</option>
         </select>
-        <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
       </div>
       <div class="form-group">
         <label for="update_ticket_1_group_id123" class="input-group-addon u-clickable">Group</label>
@@ -54,7 +54,7 @@
           <option value="2">Twitter</option>
           <option value="1" selected="">Users</option>
         </select>
-        <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
       </div>
       <div class="form-group">
         <label for="update_ticket_1_owner_id123" class="input-group-addon u-clickable">Owner</label>
@@ -62,7 +62,7 @@
           <option value="">-</option>
           <option value="3">Felix Niklas</option>
         </select>
-        <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down" /></svg>
+        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
       </div>
     </form>
     <form class="form-inline">
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
index bda4c46f1..c6fcd3d5f 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
@@ -48,7 +48,7 @@
         </div>
         <% if !_.isEmpty( @article.attachments ): %>
           <div class="attachments">
-            <svg class="icon-paperclip"><use xlink:href="#icon-paperclip" /></svg>
+            <%- @Icon('icon-paperclip', 'icon-paperclip') %>
             <h3><%- @article.attachments.length %> <%- @T('Attached Files') %></h3>
             <% for attachment in @article.attachments: %>
               <div class="attachment">
@@ -69,7 +69,7 @@
       <div class="horizontal article-meta-row">
         <div class="article-meta-key"><%- @T( 'Channel' ) %></div>
         <div class="article-meta-value">
-          <svg class="article-meta-icon"><use xlink:href="#icon-<%- @article.type.name %>" /></svg>
+          <%- @Icon("icon-#{@article.type.name}", 'article-meta-icon') %>
           <%- @T(@article.type.name) %>
           <% if @article.type.name is 'email': %>
           <a class="text-muted" href="<%= App.Config.get('api_path') %>/ticket_article_plain/<%= @article.id %>"><%- @T( 'raw' ) %></a>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_view_actions.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_view_actions.jst.eco
index 5dca6dddd..501063ee7 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_view_actions.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_view_actions.jst.eco
@@ -1,7 +1,7 @@
 <div class="article-content article-actions horizontal stretch">
   <% for action in @actions: %>
     <a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action u-clickable<% if action.class: %> <%= action.class %><% end %>">
-      <svg class="article-action-icon"><use xlink:href="#icon-<%= action.icon %>" /></svg><%- @T( action.name ) %>
+      <%- @Icon("icon-#{action.icon}", 'article-action-icon') %><%- @T( action.name ) %>
     </a>
   <% end %>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco
index 6c0634d0f..5166762fa 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco
@@ -1,9 +1,9 @@
 <div class="btn btn--action btn--split--first js-highlight centered">
-  <svg class="icon icon-marker js-highlight-icon"><use xlink:href="#icon-marker" /></svg>
+  <%- @Icon('icon-marker', 'icon icon-marker js-highlight-icon') %>
 </div>
 <div class="dropdown dropdown--actions">
   <div class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown" aria-expanded="true">
-    <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
+    <%- @Icon('icon-arrow-down', 'icon-arrow-down') %>
   </div>
   <ul class="dropdown-menu dropdown-menu-right" role="menu">
     <% for entry, i in @colors: %>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/overview_navigator.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/overview_navigator.jst.eco
index a2698d49f..ba204fa00 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/overview_navigator.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/overview_navigator.jst.eco
@@ -4,10 +4,18 @@
 <ul class="pagination">
   <li <% if !@previous: %>class="disabled"<% end %> title="<%- @Ti( 'previous in Overview' ) %>">
     <a class="centered previous" href="<% if @previous: %><%- @previous.uiUrl() %><% end %>" data-id="<% if @previous: %><%- @previous.id %><% end %>">
-      <svg class="icon icon-arrow-left<% if !@previous: %> arrow--disabled<% end %>"><use xlink:href="#icon-arrow-left" /></svg>
+      <% if @previous: %>
+        <%- @Icon('icon-arrow-left', 'icon icon-arrow-left') %>
+      <% else: %>
+        <%- @Icon('icon-arrow-left', 'icon icon-arrow-left arrow--disabled') %>
+      <% end %>
     </a>
   <li <% if !@next: %>class="disabled"<% end %> title="<%- @Ti( 'next in Overview' ) %>">
     <a class="centered next" href="<% if @next: %><%- @next.uiUrl() %><% end %>" data-id="<% if @next: %><%- @next.id %><% end %>">
-      <svg class="icon icon-arrow-right<% if !@next: %> arrow--disabled<% end %>"><use xlink:href="#icon-arrow-right" /></svg>
+      <% if @next: %>
+        <%- @Icon('icon-arrow-right', 'icon icon-arrow-right') %>
+      <% else: %>
+        <%- @Icon('icon-arrow-right', 'icon icon-arrow-right arrow--disabled') %>
+      <% end %>
     </a>
 </ul>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/user.jst.eco b/app/assets/javascripts/app/views/user.jst.eco
index c095188b1..7ada02328 100644
--- a/app/assets/javascripts/app/views/user.jst.eco
+++ b/app/assets/javascripts/app/views/user.jst.eco
@@ -12,7 +12,7 @@
 </div>
 
 <div class="searchfield">
-  <svg class="icon icon-magnifier"><use xlink:href="#icon-magnifier" /></svg>
+  <%- @Icon('icon-magnifier', 'icon icon-magnifier') %>
   <input class="js-search form-control" name="search" placeholder="<%- @Ti('Search for users') %>" type="search">
 </div>
 
diff --git a/app/assets/javascripts/app/views/widget/organization.jst.eco b/app/assets/javascripts/app/views/widget/organization.jst.eco
index 41b39320e..3ef5b9163 100644
--- a/app/assets/javascripts/app/views/widget/organization.jst.eco
+++ b/app/assets/javascripts/app/views/widget/organization.jst.eco
@@ -1,7 +1,7 @@
 <div class="sidebar-block">
     <div class="avatar organizationInfo-avatar size-50">
       <a href="<%- @organization.uiUrl() %>">
-        <svg class="icon-organization"><use xlink:href="#icon-organization" /></svg>
+        <%- @Icon('icon-organization', 'icon-organization') %>
       </a>
     </div>
     <h3 title="<%- @Ti( 'Name') %>"><%= @organization.displayName() %></h3>
diff --git a/app/assets/javascripts/app/views/widget/switch_back_to_user.jst.eco b/app/assets/javascripts/app/views/widget/switch_back_to_user.jst.eco
index 7001ff8c9..03616cb33 100644
--- a/app/assets/javascripts/app/views/widget/switch_back_to_user.jst.eco
+++ b/app/assets/javascripts/app/views/widget/switch_back_to_user.jst.eco
@@ -1,8 +1,8 @@
-<svg class="switchBackToUser-icon"><use xlink:href="#icon-switchView" /></svg>
+<%- @Icon('icon-switchView', 'switchBackToUser-icon') %>
 <div class="switchBackToUser-text"><%- @T('Zammad looks like this for "%s"', @S('firstname') + ' ' + @S('lastname')  ) %></div>
 <div class="align-right horizontal center js-close u-clickable">
   <%- @T('Back to my view') %>
   <div class="switchBackToUser-close">
-    <svg class="icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+    <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/widget/tag.jst.eco b/app/assets/javascripts/app/views/widget/tag.jst.eco
index 1469ef748..8542ec8cf 100644
--- a/app/assets/javascripts/app/views/widget/tag.jst.eco
+++ b/app/assets/javascripts/app/views/widget/tag.jst.eco
@@ -3,9 +3,8 @@
   <% for tag in @tags: %>
   <li class="sidebar-list-item">
     <div class="sidebar-list-item-name"><%= tag %></div>
-    <!--<span>3</span>-->
     <div class="sidebar-list-item-delete js-delete">
-      <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
+      <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %>
     </div>
   <% end %>
 </ul>
diff --git a/app/assets/javascripts/app/views/widget/ticket_stats_list.jst.eco b/app/assets/javascripts/app/views/widget/ticket_stats_list.jst.eco
index c1f4674ec..d75b45afe 100644
--- a/app/assets/javascripts/app/views/widget/ticket_stats_list.jst.eco
+++ b/app/assets/javascripts/app/views/widget/ticket_stats_list.jst.eco
@@ -5,7 +5,7 @@
   <% ticket = App.Ticket.fullLocal(ticket_id) %>
   <li class="task">
     <div class="icon-holder">
-      <svg class="<%- ticket.icon() %>"><use xlink:href="#icon-priority" /></svg>
+      <%- @Icon('icon-priority', ticket.icon()) %>
     </div>
     <div class="task-text">
       <a class="name ticket-popover" data-id="<%- ticket_id %>" href="<%- ticket.uiUrl() %>"><%= ticket.title %></a>