From 4355c4156a6eacf99525ff1807a07eb5497f7f94 Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Fri, 4 Sep 2015 16:03:03 +0200
Subject: [PATCH] Improved @Icon helper - @Icon('name', 'other classes') for
 .eco files.

---
 app/assets/javascripts/app/index.js.coffee    |  2 +-
 .../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           | 16 +++----
 .../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      | 48 +++++++++----------
 .../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         | 10 ++--
 .../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       |  8 ++--
 .../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    |  8 ++--
 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  |  2 +-
 .../views/widget/ticket_stats_list.jst.eco    |  2 +-
 71 files changed, 164 insertions(+), 164 deletions(-)

diff --git a/app/assets/javascripts/app/index.js.coffee b/app/assets/javascripts/app/index.js.coffee
index 46a8f30fc..9594524ad 100644
--- a/app/assets/javascripts/app/index.js.coffee
+++ b/app/assets/javascripts/app/index.js.coffee
@@ -231,7 +231,7 @@ class App extends Spine.Controller
 
       # define icon helper
       params.Icon = (name, className = '') ->
-        "<svg class=\"#{className}\"><use xlink:href=\"##{name}\" /></svg>"
+        "<svg class=\"icon icon-#{name} #{className}\"><use xlink:href=\"#icon-#{name}\" /></svg>"
 
       # define template
       JST["app/views/#{name}"](params)
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 60cef79ce..a874a0b26 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">
-            <%- @Icon('icon-received-calls', 'tab-icon') %>
+            <%- @Icon('received-calls', 'tab-icon') %>
             <%- @T('Received Call') %>
           </li>
 
           <li class="tab u-textTruncate" data-type="phone-out">
-            <%- @Icon('icon-outbound-calls', 'tab-icon') %>
+            <%- @Icon('outbound-calls', 'tab-icon') %>
             <%- @T('Outbound Call') %>
           </li>
 
          <li class="tab u-textTruncate" data-type="email-out">
-            <%- @Icon('icon-email', 'tab-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 1bc7f2b1a..09d947c51 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">
-        <%- @Icon('icon-diagonal-cross', '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 010caa54b..a798ec21b 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') %>"><%- @Icon('icon-plus', 'icon-trash') %></a>
+          <a href="#" data-type="email-address-new" title="<%- @Ti('New Email Address') %>"><%- @Icon('plus', 'icon-trash') %></a>
         </td>
         <td>
-          <a href="#" data-type="delete" title="<%- @Ti('Delete') %>"><%- @Icon('icon-trash', 'icon-trash') %></a>
+          <a href="#" data-type="delete" title="<%- @Ti('Delete') %>"><%- @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 c57108470..74c6b8494 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">
-        <%- @Icon('icon-diagonal-cross', '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">
-        <%- @Icon('icon-diagonal-cross', '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">
-        <%- @Icon('icon-diagonal-cross', '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">
-        <%- @Icon('icon-diagonal-cross', '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">
-        <%- @Icon('icon-diagonal-cross', '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">
-          <%- @Icon('icon-diagonal-cross', '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 92ba3d009..e132c15c1 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">
-        <%- @Icon('icon-diagonal-cross', '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">
-        <%- @Icon('icon-diagonal-cross', '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">
-        <%- @Icon('icon-diagonal-cross', '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 dfe7cf7a6..3dd37d1d4 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">
-    <%- @Icon('icon-diagonal-cross', '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 3fa46c5ec..866886640 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': %>
-      <%- @Icon('icon-cog', 'dropdown-icon') %>
+      <%- @Icon('cog', 'dropdown-icon') %>
       <label><%- @T('Action') %></label>
     <% end %>
-    <%- @Icon('icon-arrow-down', '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 45b68bc1f..f6c0de376 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">
-        <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %></div><%- @T('Cancel Upload') %>
+        <%- @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 42834a2ab..dfa927c95 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 %>">
-    <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %><%- @T('Delete File') %>
+    <%- @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 951eb6f03..6c45d2493 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 ) + ' ' %>">
-      <%- @Icon('icon-help', '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 6f36d6de8..180360653 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">
-  <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
+  <%- @Icon('diagonal-cross', 'icon-error') %>
   <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 fb22fb00d..358b76c33 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">
-  <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
+  <%- @Icon('diagonal-cross', 'icon-error') %>
   <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 de4bf0416..380c5e5d3 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">
-  <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
+  <%- @Icon('diagonal-cross', 'icon-error') %>
   <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 968c8005d..ea7282ac2 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 %>
-      <%- @Icon('icon-radio', 'icon-radio') %>
-      <%- @Icon('icon-radio-checked', 'icon-radio-checked') %>
+      <%- @Icon('radio') %>
+      <%- @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 18ee3ccf0..5463b410a 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>
-  <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+  <%- @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 2e0afe04f..2890a60f5 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: %>
-    <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+    <%- @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 9eeb2bcd3..b7b063d88 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">
-      <%- @Icon('icon-long-arrow-right', 'icon icon-long-arrow-right') %>
+      <%- @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 %>">
-    <%- @Icon("icon-#{item.icon}", 'icon') %>
+    <%- @Icon(item.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 d20188ef8..3d73202cb 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"/>
-          <%- @Icon('icon-checkbox', 'icon-checkbox icon-unchecked') %>
-          <%- @Icon('icon-checkbox-checked', 'icon-checkbox-checked icon-checked') %>
+          <%- @Icon('checkbox', 'icon-unchecked') %>
+          <%- @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"/>
-          <%- @Icon('icon-checkbox', 'icon-checkbox icon-unchecked') %>
-          <%- @Icon('icon-checkbox-checked', 'icon-checkbox-checked icon-checked') %>
+          <%- @Icon('checkbox', 'icon-unchecked') %>
+          <%- @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"/>
-          <%- @Icon('icon-radio', 'icon-radio icon-unchecked') %>
-          <%- @Icon('icon-radio-checked', 'icon-radio-checked icon-checked') %>
+          <%- @Icon('radio', 'icon-unchecked') %>
+          <%- @Icon('radio-checked', 'icon-checked') %>
         </label>
       </td>
     <% end %>
@@ -73,7 +73,7 @@
 
       <td <% if item.parentClass: %>class="<%= item.parentClass %>"<% end %>>
         <% if item.name is 'icon': %>
-          <%- @Icon('icon-priority', item.class) %>
+          <%- @Icon('priority', item.class) %>
         <% else: %>
           <% if item.link: %>
             <a href="<%- item.link %>" <% if item.target: %>target="<%= item.target %>"<% end %>>
@@ -90,7 +90,7 @@
       </td>
     <% end %>
     <% if @destroy: %>
-      <td data-type="destroy"><%- @Icon('icon-trash', 'icon-trash') %></td>
+      <td data-type="destroy"><%- @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 2f3294fbc..c9ed38590 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">
-  <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+  <%- @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 b2310f89c..d2e4f0c2c 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">
-    <%- @Icon('icon-organization', 'recipientList-icon') %>
+    <%- @Icon('organization', 'recipientList-icon') %>
   </div>
   <div class="recipientList-name">
     <%= @organization.displayName() %>
     <span class="recipientList-detail">- <%= @organization.member_ids.length %> <%- @T('People') %></span>
   </div>
-  <%- @Icon('icon-arrow-right', 'recipientList-arrow icon-arrow-right') %>
+  <%- @Icon('arrow-right', 'recipientList-arrow') %>
 </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 a4297ca9f..9e2073f10 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">
-      <%- @Icon('icon-arrow-left', '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 0cd3c357d..e414ab48c 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">
-    <%- @Icon('icon-user', 'recipientList-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 5972adbc7..520e60951 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">
-    <%- @Icon('icon-plus', 'recipientList-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 ea615d21c..e11a56bad 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 236aaeb9d..4f7c50a3c 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 d0cce43a0..5c68f20ac 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 e38f8076b..d813cb48f 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 25a6b2ef2..243fce3a8 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 17f32195c..6607253aa 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 ea9a8dee3..614f50812 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 1a8426fe5..d25251cf6 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 885583d23..d62a2799f 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 b3e98a256..f742542b8 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 5697e8f7e..a58127513 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 708960bf5..c3aa17660 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 731700f15..8eeeed6de 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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 f9a4fc12e..0f88fefea 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">
-  <%- @Icon('icon-full-logo', 'wizard-logo icon-full-logo') %>
+  <%- @Icon('full-logo', 'wizard-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><%- @Icon('icon-download', 'icon-download') %> <%- @T('Personal Migration Plugin') %></a>
+        <a class="btn btn--primary btn--download js-download" 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>
-              <%- @Icon('icon-diagonal-cross', 'icon icon-error') %>
-              <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
+              <%- @Icon('diagonal-cross', 'icon-error') %>
+              <%- @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 -->
-                <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
+                <%- @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>
-                <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
+                <%- @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>
-                <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
+                <%- @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>
-                <%- @Icon('icon-checkmark', 'icon icon-checkmark') %>
+                <%- @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 dc1ff9de0..650252fef 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">
-    <%- @Icon('icon-diagonal-cross', '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 6d4e536c4..a7b24e436 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">
-                <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %><%- @T('Delete File') %>
+                <%- @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">
-                <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %><%- @T('Delete File') %>
+                <%- @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">
-                  <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %></svg><%- @T('Cancel Upload') %>
+                  <%- @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 81c3e2001..aa630b7cc 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">
-              <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+              <%- @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">
-                    <%- @Icon('icon-team', 'recipientList-icon') %>
+                    <%- @Icon('team', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Albrecht &amp; Bertschler GmbH
                     <span class="recipientList-detail">- 4 Personen</span>
                   </div>
-                  <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
+                  <%- @Icon('arrow-right', 'recipientList-arrow') %>
                     <li class="recipientList-entry js-organization" data-organization-id="BENCHMARKhumanresources">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-organization', 'recipientList-icon') %>
+                    <%- @Icon('organization', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     BENCHMARK human resources
                     <span class="recipientList-detail">- 2 Personen</span>
                   </div>
-                  <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
+                  <%- @Icon('arrow-right', 'recipientList-arrow') %>
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-user', 'recipientList-icon') %>
+                    <%- @Icon('user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Belinda Matt
@@ -117,7 +117,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-user', 'recipientList-icon') %>
+                    <%- @Icon('user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Benjamin Wahlers
@@ -126,7 +126,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-user', 'recipientList-icon') %>
+                    <%- @Icon('user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Benjamin Weiß
@@ -135,7 +135,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-organization', 'recipientList-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">
-                    <%- @Icon('icon-team', 'recipientList-icon') %>
+                    <%- @Icon('team', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Support Team Berlin
                     <span class="recipientList-detail">- 5 Personen</span>
                   </div>
-                  <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
+                  <%- @Icon('arrow-right', 'recipientList-arrow') %>
 
                 <li class="recipientList-entry js-organization">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-organization', 'recipientList-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>
-                  <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
+                  <%- @Icon('arrow-right', 'recipientList-arrow') %>
 
                 <li class="recipientList-entry js-organization">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-organization', 'recipientList-icon') %>
+                    <%- @Icon('organization', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Bertsch Ecopower GmbH
                     <span class="recipientList-detail">- 1 Person</span>
                   </div>
-                  <%- @Icon('icon-arrow-right', 'icon-arrow-right recipientList-arrow') %>
+                  <%- @Icon('arrow-right', 'recipientList-arrow') %>
 
                 <li class="recipientList-entry recipientList--new u-clickable horizontal center">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-plus', 'recipientList-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">
-                    <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
+                    <%- @Icon('arrow-left') %>
                     <span class="btn-label"><%- @T('Back') %></span>
                   </div>
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-user', 'recipientList-icon') %>
+                    <%- @Icon('user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Andreas Kramer
@@ -199,7 +199,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-user', 'recipientList-icon') %>
+                    <%- @Icon('user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Belinda Matt
@@ -208,7 +208,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-user', 'recipientList-icon') %>
+                    <%- @Icon('user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Damian Sprengler
@@ -217,7 +217,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-user', 'recipientList-icon') %>
+                    <%- @Icon('user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Katharina Nussman
@@ -228,13 +228,13 @@
               <ul class="recipientList-organizationMembers hide" id="BENCHMARKhumanresources">
                 <li class="recipientList-controls js-back">
                   <div class="btn btn--action btn--onDark">
-                    <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
+                    <%- @Icon('arrow-left') %>
                     <span class="btn-label"><%- @T('Back') %></span>
                   </div>
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-user', 'recipientList-icon') %>
+                    <%- @Icon('user', 'recipientList-icon') %>
                   </div>
                   <div class="recipientList-name">
                     Hubert Lang
@@ -243,7 +243,7 @@
 
                 <li class="recipientList-entry">
                   <div class="recipientList-iconSpacer">
-                    <%- @Icon('icon-user', 'recipientList-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 c2e59fca4..572756c79 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">
-  <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
+  <%- @Icon('diagonal-cross', 'icon-error') %>
   <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 1236ceeee..f261e6134 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">
-        <%- @Icon('icon-marker', 'icon icon-marker js-highlight-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">
-          <%- @Icon('icon-arrow-down', '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">
-              <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
+              <%- @Icon('arrow-left') %>
             </a>
           <li>
             <a class="btn btn--action btn--split--last" href="#" data-from="1" data-type="page">
-              <%- @Icon('icon-arrow-right', '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">
-            <%- @Icon('icon-arrow-left', 'icon-arrow-left') %>
+            <%- @Icon('arrow-left') %>
           </a>
         <li>
           <a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
-            <%- @Icon('icon-arrow-left', '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 1259351a5..7ad2bb3d7 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>
-        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+        <%- @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 cecd2b0d4..71a1f94b6 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">
-  <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
+  <%- @Icon('diagonal-cross', 'icon-error') %>
   <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 6a133c378..8cfa89500 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">
-              <%- @Icon('icon-diagonal-cross', 'icon-error icon-diagonal-cross') %>
+              <%- @Icon('diagonal-cross', 'icon-error') %>
             </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 312e04b19..f99a405ce 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">
-      <%- @Icon('icon-line-left-arrow', 'line-arrow icon-line-left-arrow') %>
+      <%- @Icon('line-left-arrow', 'line-arrow') %>
     </div>
     <div class="merge-control-input">is equal</div>
     <div class="merge-arrow">
-      <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
+      <%- @Icon('line-right-arrow', 'line-arrow') %>
     </div>
   </div>
 
@@ -38,17 +38,17 @@
 
   <div class="merge-control">
     <div class="merge-arrow">
-      <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
+      <%- @Icon('line-right-arrow', 'line-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>
-      <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+      <%- @Icon('arrow-down', 'dropdown-arrow') %>
     </div>
     <div class="merge-arrow">
-      <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
+      <%- @Icon('line-right-arrow', 'line-arrow') %>
     </div>
   </div>
 
@@ -68,7 +68,7 @@
   <div class="merge-controls">
     <div class="merge-control">
       <div class="merge-arrow">
-        <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
+        <%- @Icon('line-right-arrow', 'line-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>
-        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+        <%- @Icon('arrow-down', 'dropdown-arrow') %>
       </div>
       <div class="merge-arrow">
-        <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
+        <%- @Icon('line-right-arrow', 'line-arrow') %>
       </div>
     </div>
     <div class="merge-control">
       <div class="merge-arrow">
-        <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
+        <%- @Icon('line-right-arrow', 'line-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>
-        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+        <%- @Icon('arrow-down', 'dropdown-arrow') %>
       </div>
       <div class="merge-arrow">
-        <%- @Icon('icon-line-right-arrow', 'line-arrow icon-line-right-arrow') %>
+        <%- @Icon('line-right-arrow', 'line-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 504673947..f82f59909 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">
-          <%- @Icon('icon-cog', 'dropdown-icon') %>
+          <%- @Icon('cog', 'dropdown-icon') %>
           <label>Aktion</label>
-          <%- @Icon('icon-arrow-down', '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">
-        <%- @Icon('icon-organization', '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 6fcc498d4..80dc04863 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">
-        <%- @Icon('icon-priority', item.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">
-        <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %>
+        <%- @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 9b85f4a7e..bb9d164eb 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 %>">
-                <%- @Icon("icon-#{auth_provider.class}-button", 'provider-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">
-    <%- @Icon('icon-logo', 'logo icon-logo') %>
+    <%- @Icon('logo') %>
     <%- @T("Powered by") %>
-    <%- @Icon('icon-logotype', 'logotype icon-logotype') %>
+    <%- @Icon('logotype', '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 66b8b3875..c673a8b4a 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">
-          <%- @Icon('icon-diagonal-cross', '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 95833fca9..fa83a8520 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">
-    <%- @Icon('icon-magnifier', 'icon-magnifier') %>
+    <%- @Icon('magnifier') %>
     <div class="empty-search">
-      <%- @Icon('icon-diagonal-cross', 'icon-diagonal-cross') %>
+      <%- @Icon('diagonal-cross') %>
     </div>
   </div>
   <div class="logo js-toggleNavigation">
-    <%- @Icon('icon-logo', '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 829a882b9..58274d445 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">
-        <%- @Icon("icon-#{item.class}", 'nav-icon') %>
+        <%- @Icon(item.class, 'nav-icon') %>
         <span class="nav-item-name flex">
-          <%- @T( item.name ) %>
+          <%- @T(item.name) %>
         </span>
-        <%- @Icon("icon-arrow-down", 'dropdown-icon icon-arrow-down') %>
+        <%- @Icon('arrow-down', 'dropdown-icon') %>
     </a>
     <ul class="dropdown-menu dropdown-menu--light">
       <% for item in item.child: %>
@@ -23,9 +23,9 @@
   <% else: %>
     <li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>">
       <a class="horizontal center" href="<%= item.target %>">
-        <%- @Icon("icon-#{item.class}", 'nav-icon') %>
+        <%- @Icon(item.class, 'nav-icon') %>
         <span class="nav-item-name flex">
-          <%- @T( item.name ) %>
+          <%- @T(item.name) %>
         </span>
       </a>
     </li>
diff --git a/app/assets/javascripts/app/views/navigation/personal.jst.eco b/app/assets/javascripts/app/views/navigation/personal.jst.eco
index f83d4d995..2a341186c 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: %>
-          <%- @Icon('icon-plus', 'user-menu-icon icon-plus') %>
+          <%- @Icon('plus', 'user-menu-icon') %>
         <% 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: %><%- @Icon("icon-#{item.iconClass}", "icon-#{item.iconClass}") %><% end %>
+              <% if 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 ) %>">
-        <%- @Icon('icon-cog', 'user-menu-icon icon-cog') %>
+        <%- @Icon('cog', 'user-menu-icon') %>
       </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 fce8d9146..4d44f4335 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">
-          <%- @Icon("icon-#{item.iconClass}", "icon icon-#{item.iconClass}") %>
+          <%- @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 34610fe13..698e6f4c7 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">
-    <%- @Icon('icon-organization', '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 f380689ca..2745ae227 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">
-    <%- @Icon('icon-diagonal-cross', '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 06a0b69dc..7b80d3110 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">
-          <%- @Icon('icon-diagonal-cross', '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 27b00218c..6611d1d3c 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 %>><%- @Icon('icon-trash', 'icon-trash') %></a></td>
+        <td><a href="#" data-device-id="<%- device.id %>" data-type="delete" title="<%- @Ti('Delete') %>"<% if device.current: %>disabled<% end %>><%- @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 2a8bbb392..804064e37 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') %>"><%- @Icon('icon-trash', 'icon-trash') %></a></td>
+      <td><a href="#" data-session-id="<%- session.id %>" data-type="delete" title="<%- @Ti('Delete') %>"><%- @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 30cf4f238..3efa71e96 100644
--- a/app/assets/javascripts/app/views/task_widget_tasks.jst.eco
+++ b/app/assets/javascripts/app/views/task_widget_tasks.jst.eco
@@ -2,18 +2,18 @@
   <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">
       <% if item.task.notify && item.data.iconClass is 'priority': %>
-        <%- @Icon('icon-priority-modified-outer-circle', "icon icon-#{item.data.iconClass}") %>
+        <%- @Icon('priority-modified-outer-circle', "icon-#{item.data.iconClass}") %>
       <% else: %>
-        <%- @Icon("icon-#{item.data.iconClass}", "icon icon-#{item.data.iconClass}") %>
+        <%- @Icon(item.data.iconClass, "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}") %>
+        <%- @Icon('priority-modified-inner-circle', "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">
-        <%- @Icon('icon-diagonal-cross', '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 521f7b77d..c13a11aef 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>
-        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+        <%- @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>
-        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+        <%- @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>
-        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+        <%- @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>
-        <%- @Icon('icon-arrow-down', 'dropdown-arrow') %>
+        <%- @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 c6fcd3d5f..d55f2b590 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">
-            <%- @Icon('icon-paperclip', '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">
-          <%- @Icon("icon-#{@article.type.name}", 'article-meta-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 501063ee7..26cd41ec2 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 %>">
-      <%- @Icon("icon-#{action.icon}", 'article-action-icon') %><%- @T( action.name ) %>
+      <%- @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 5166762fa..801846408 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">
-  <%- @Icon('icon-marker', 'icon icon-marker js-highlight-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">
-    <%- @Icon('icon-arrow-down', '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 ba204fa00..33e2e38b1 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
@@ -5,17 +5,17 @@
   <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 %>">
       <% if @previous: %>
-        <%- @Icon('icon-arrow-left', 'icon icon-arrow-left') %>
+        <%- @Icon('arrow-left') %>
       <% else: %>
-        <%- @Icon('icon-arrow-left', 'icon icon-arrow-left arrow--disabled') %>
+        <%- @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 %>">
       <% if @next: %>
-        <%- @Icon('icon-arrow-right', 'icon icon-arrow-right') %>
+        <%- @Icon('arrow-right') %>
       <% else: %>
-        <%- @Icon('icon-arrow-right', 'icon icon-arrow-right arrow--disabled') %>
+        <%- @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 7ada02328..e808f0da3 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">
-  <%- @Icon('icon-magnifier', 'icon icon-magnifier') %>
+  <%- @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 3ef5b9163..8c575c6fb 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() %>">
-        <%- @Icon('icon-organization', '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 03616cb33..6c9162733 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 @@
-<%- @Icon('icon-switchView', 'switchBackToUser-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">
-    <%- @Icon('icon-diagonal-cross', '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 8542ec8cf..d2272f3af 100644
--- a/app/assets/javascripts/app/views/widget/tag.jst.eco
+++ b/app/assets/javascripts/app/views/widget/tag.jst.eco
@@ -4,7 +4,7 @@
   <li class="sidebar-list-item">
     <div class="sidebar-list-item-name"><%= tag %></div>
     <div class="sidebar-list-item-delete js-delete">
-      <%- @Icon('icon-diagonal-cross', 'icon icon-diagonal-cross') %>
+      <%- @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 d75b45afe..ff3d4513f 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">
-      <%- @Icon('icon-priority', ticket.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>