Improved @Icon helper - @Icon('name', 'other classes') for .eco files.

2015-09-04 16:03:03 +02:00 · 2015-09-04 16:03:03 +02:00 · 4355c4156a
commit 4355c4156a
parent 7aa121341e
71 changed files with 164 additions and 164 deletions
--- 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)
--- 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>
--- 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>
--- 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': %>
--- 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>
--- 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>
--- 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>
--- 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: %>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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">
--- 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>
--- 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>
--- 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 %>
--- 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">
--- 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>
--- 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>
--- 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() %>
--- 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') %>
--- 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>
--- 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>
--- 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">
--- 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">
--- 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>
--- 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>
--- 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>
--- 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 -->
--- 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 -->
--- 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>
--- 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>
--- 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">
--- 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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>
--- 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>
--- 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>

--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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) %>
        </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,7 +23,7 @@
  <% 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) %>
        </span>
--- 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 %>
--- 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>
--- 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>
--- 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>
--- 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 %>
--- 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>
--- 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>
--- 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>
--- 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">
--- 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>
--- 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>
--- 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: %>
--- 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>
--- 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>

--- 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>
--- 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>
--- 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>
--- 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>