From 20e6283bb210c06c66b67061c9c4c233a0eaf086 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Mon, 19 Oct 2015 16:38:13 +0200
Subject: [PATCH] refactor icons

fully switch to the @Icon method
---
 .../app/views/generic/ical_feed.jst.eco       |  2 +-
 .../views/generic/postmaster_match.jst.eco    |  2 +-
 .../app/views/generic/select.jst.eco          |  2 +-
 .../layout_ref/communication_overview.jst.eco |  6 +++---
 .../layout_ref/communication_reply.jst.eco    |  2 +-
 .../app/views/layout_ref/content.jst.eco      |  6 +++---
 .../views/layout_ref/import_wizard.jst.eco    | 12 +++++------
 .../app/views/layout_ref/local_modal.jst.eco  | 10 +++++-----
 .../app/views/layout_ref/schedulers.jst.eco   |  4 ++--
 .../app/views/layout_ref/setup.jst.eco        |  4 ++--
 .../app/views/layout_ref/sla.jst.eco          |  4 ++--
 .../app/views/layout_ref/sla_modal.jst.eco    |  4 ++--
 .../app/views/layout_ref/ticket_zoom.jst.eco  | 14 ++++++-------
 .../app/views/layout_ref/user_list.jst.eco    | 10 +++++-----
 .../app/views/layout_ref/user_profile.jst.eco | 20 +++++++++----------
 .../javascripts/app/views/sla/index.jst.eco   |  2 +-
 .../app/views/ticket_zoom/article_new.jst.eco | 18 ++++++++---------
 17 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/app/assets/javascripts/app/views/generic/ical_feed.jst.eco b/app/assets/javascripts/app/views/generic/ical_feed.jst.eco
index 8a301df6e..8fbbc2891 100644
--- a/app/assets/javascripts/app/views/generic/ical_feed.jst.eco
+++ b/app/assets/javascripts/app/views/generic/ical_feed.jst.eco
@@ -14,7 +14,7 @@
         <option value="<%= url %>" <% if @attribute.value is url: %>selected<%end%>><%- @T(name) %></option>
       <% end %>
     </select>
-    <%- @Icon('arrow-down', 'dropdown-arrow') %>
+    <%- @Icon('arrow-down') %>
   </div>
   <span class="text-small text-muted">(<%- @T('iCalendar links from Google, will get fetched once a day') %>)</span>
 </div>
diff --git a/app/assets/javascripts/app/views/generic/postmaster_match.jst.eco b/app/assets/javascripts/app/views/generic/postmaster_match.jst.eco
index 9899921e5..5d047f42c 100644
--- a/app/assets/javascripts/app/views/generic/postmaster_match.jst.eco
+++ b/app/assets/javascripts/app/views/generic/postmaster_match.jst.eco
@@ -9,7 +9,7 @@
       <div class="controls">
         <div class="u-positionOrigin js-operator">
           <select></select>
-          <%- @Icon('arrow-down', 'dropdown-arrow') %>
+          <%- @Icon('arrow-down') %>
         </div>
       </div>
       <div class="controls js-value"></div>
diff --git a/app/assets/javascripts/app/views/generic/select.jst.eco b/app/assets/javascripts/app/views/generic/select.jst.eco
index 076b20d48..31efbbd71 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('arrow-down', 'dropdown-arrow') %>
+    <%- @Icon('arrow-down') %>
   <% end %>
 </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco b/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
index 353bacc4b..e80901af1 100644
--- a/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
@@ -22,11 +22,11 @@
       <ul class="pagination">
         <li>
           <a class="btn btn--action btn--split--first" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
-            <svg class="arrow arrow--left"><use xlink:href="#icon-arrow-left" /></svg>
+            <%- @Icon('arrow-left') %>
           </a>
         <li>
           <a class="btn btn--action btn--split--last" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
-          <svg class="arrow arrow--right"><use xlink:href="#icon-arrow-right" /></svg>
+            <%- @Icon('arrow-left') %>
           </a>
       </ul>
     </div>
@@ -229,7 +229,7 @@ Oliver<br>
                 </div>
               </div>
               <div class="attachments">
-                <svg class="icon-paperclip"><use xlink:href="#icon-paperclip" /></svg>
+                <%- @Icon('paperclip') %>
                 <div class="attachments-title">2 <%- @T('Attached Files') %></div>
                 <div class="attachment">
                   <div class="attachment-name u-highlight">midinotes_view.jpg</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 a7b24e436..e04d21f64 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
@@ -45,7 +45,7 @@
                   <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
                 </div>
                 <div class="attachmentUpload-cancel js-cancel">
-                  <%- @Icon('diagonal-cross') %></svg><%- @T('Cancel Upload') %>
+                  <%- @Icon('diagonal-cross') %> <%- @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 03d1151e7..91d6f9dcb 100644
--- a/app/assets/javascripts/app/views/layout_ref/content.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/content.jst.eco
@@ -30,15 +30,15 @@
 
   <h2>VIP Avatars</h2>
 
-  <div class="avatar avatar--vip" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
+  <div class="avatar avatar--vip" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><%- @Icon('crown') %></div>
 
   <p><code>.avatar</code></p>
 
-  <div class="avatar avatar--vip size-50" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
+  <div class="avatar avatar--vip size-50" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><%- @Icon('crown') %></div>
 
   <p><code>.avatar.size-50</code></p>
 
-  <div class="avatar avatar--vip size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
+  <div class="avatar avatar--vip size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><%- @Icon('crown') %></div>
 
   <p><code>.avatar.size-80</code></p>
 
diff --git a/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco b/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
index d83140f3f..02618024f 100644
--- a/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/import_wizard.jst.eco
@@ -26,7 +26,7 @@
           Download and install this personalised OTRS Migration Plugin on your OTRS System:
         </p>
         <a class="btn btn--primary btn--download" download data-action="reveal">
-          <svg class="icon-download"><use xlink:href="#icon-download" /></svg>  Personal Migration Plugin</a>
+          <%- @Icon('download') %> Personal Migration Plugin</a>
       </div>
       <div class="wizard-controls horizontal center">
         <a class="btn btn--text btn--secondary" data-target="home">Go Back</a>
@@ -45,8 +45,8 @@
             <input type="url" id="otrs-link" class="form-control" placeholder="http://otrs.company.de/otrs">
             <div class="input-feedback centered">
               <div class="small loading icon"></div>
-              <svg class="icon icon-error icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg>
-              <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
+              <%- @Icon('icon-diagonal-cross', 'icon-error') %>
+              <%- @Icon('checkmark') %>
             </div>
           </div>
         </div>
@@ -66,7 +66,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress max="42" value="42"></progress></div>
-                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
+                <%- @Icon('checkmark') %>
               </div>
           </tr>
           <tr class="is-done">
@@ -75,7 +75,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress max="134318" value="134318"></progress></div>
-                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
+                <%- @Icon('checkmark') %>
               </div>
           </tr>
           <tr>
@@ -84,7 +84,7 @@
             <td class="progressTable-progressCell">
               <div class="horizontal center">
                 <div class="flex"><progress value="0.3"></progress></div><!-- if there is no max, the value is between 0..1 -->
-                <svg class="icon icon-checkmark"><use xlink:href="#icon-checkmark" /></svg>
+                <%- @Icon('checkmark') %>
               </div>
           </tr>
         </table>
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 2c2eb283a..14fa9a3f7 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
@@ -120,7 +120,7 @@
 
 
               </select>
-              <svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
+              <%- @Icon('icon-arrow-down') %>
             </div>
               
               
@@ -212,7 +212,7 @@
                 
                 
                 <div class="help-message" title="Notes are visible to agents only, never to customers. ">
-                  <svg class="icon-help"><use xlink:href="#icon-help" /></svg>
+                  <%- @Icon('help') %>
                 </div>
                 
               </div>
@@ -279,7 +279,7 @@
 
 
               </select>
-              <svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
+              <%- @Icon('icon-arrow-down') %>
             </div>
               
               
@@ -302,9 +302,9 @@
     <div class="profile-section vertical centered">
       <div class="align-right profile-action dropdown dropdown--actions">
         <div class="dropdown-toggle" id="profileAction" data-toggle="dropdown">
-          <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
+          <%- @Icon('cog', 'dropdown-icon') %>
           <label>Aktion</label>
-          <svg class="icon-arrow-down"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
+          <%- @Icon('arrow-down') %>
         </div>
         <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="profileAction">
           <li role="presentation"><a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>
diff --git a/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco b/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco
index 4f6190487..2b0a56fec 100644
--- a/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/schedulers.jst.eco
@@ -83,7 +83,7 @@
         Where <b>State</b> is <b>open</b>.<br>
         In <b>Folder</b> <b>Spam</b>.
       </div>
-      <svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
+      <%- @Icon('arrow-right', 'action-flow-icon') %>
       <div class="action-block">
         <h3>Actions</h3>
         Set <b>State</b> to <b>closed</b>.
@@ -106,7 +106,7 @@
         Where <b>State</b> is <b>open</b>.<br>
         In <b>Folder</b> <b>Spam</b>.
       </div>
-      <svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
+      <%- @Icon('arrow-right', 'action-flow-icon') %>
       <div class="action-block">
         <h3>Actions</h3>
         Set <b>State</b> to <b>closed</b>.
diff --git a/app/assets/javascripts/app/views/layout_ref/setup.jst.eco b/app/assets/javascripts/app/views/layout_ref/setup.jst.eco
index e8ddffbe0..f6320495d 100644
--- a/app/assets/javascripts/app/views/layout_ref/setup.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/setup.jst.eco
@@ -4,7 +4,7 @@
 
     </div>
   </aside>
-  <svg class="wizard-logo icon-full-logo"><use xlink:href="#icon-full-logo" /></svg>
+  <%- @Icon('full-logo', 'wizard-logo') %>
   <div class="setup wizard">
     <div class="wizard-slide" data-slide="home">
       <div class="wizard-body vertical centered">
@@ -142,7 +142,7 @@
                 <option selected>IMAP</option>
                 <option>POP3</option>
               </select>
-              <svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
+              <%- @Icon('arrow-down') %>
             </div>
           </div>
           <div class="form-group">
diff --git a/app/assets/javascripts/app/views/layout_ref/sla.jst.eco b/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
index ee806f1da..a8b0ba5df 100644
--- a/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/sla.jst.eco
@@ -83,7 +83,7 @@
         Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
         Where <b>Priority</b> is <b>high</b>.
       </div>
-      <svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
+      <%- @Icon('icon-arrow-right', 'action-flow-icon') %>
       <div class="action-block">
         <h3>Repsonse Times</h3>
         00:30 hours First Response Time<br>
@@ -108,7 +108,7 @@
         Where <b>Organization</b> equals to <b>Deutsche Bank</b>.<br>
         Where <b>Priority</b> is <b>high</b>.
       </div>
-      <svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
+      <%- @Icon('icon-arrow-right', 'action-flow-icon') %>
       <div class="action-block">
         <h3>Repsonse Times</h3>
         00:30 hours First Response Time<br>
diff --git a/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco b/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
index 096452a03..0605d5862 100644
--- a/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/sla_modal.jst.eco
@@ -29,7 +29,7 @@
               <option>VIP</option>
             </optgroup>
           </select>
-          <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
+          <%- @Icon('arrow-down') %>
         </div>
       </div>
       <div class="controls">
@@ -42,7 +42,7 @@
             <option>is</option>
             <option>is not</option>
           </select>
-          <svg class="dropdown-arrow"><use xlink:href="#icon-arrow-down"></use></svg>
+          <%- @Icon('arrow-down') %>
         </div>
       </div>
       <input id="filter_value_1" type="text" class="form-control">
diff --git a/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
index e633d9f24..65f740ddc 100644
--- a/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
@@ -106,7 +106,7 @@
                 <div class="horizontal article-meta-row">
                   <div class="article-meta-key">Kanal</div>
                   <div class="article-meta-value">
-                    <svg class="article-meta-icon"><use xlink:href="#icon-phone" /></svg>
+                    <%- @Icon('phone', 'article-meta-icon') %>
                     phone
                   </div>
                 </div>
@@ -117,11 +117,11 @@
                   set to internal
                 </a>
                 <a href="#" data-type="reply" class="article-action u-clickable">
-                  <svg class="article-meta-icon"><use xlink:href="#icon-reply" /></svg>
+                  <%- @Icon('reply', 'article-meta-icon') %>
                   reply
                 </a>
                 <a href="#ticket/create/1/1" data-type="split" class="article-action u-clickable">
-                  <svg class="article-meta-icon"><use xlink:href="#icon-split" /></svg>
+                  <%- @Icon('split', 'article-meta-icon') %>
                   split
                 </a>
               </div>
@@ -154,7 +154,7 @@
                 <div class="horizontal article-meta-row">
                   <div class="article-meta-key">Kanal</div>
                   <div class="article-meta-value">
-                    <svg class="article-meta-icon"><use xlink:href="#icon-note" /></svg>
+                    <%- @Icon('note', 'article-meta-icon') %>
                     note
                   </div>
                 </div>
@@ -206,11 +206,11 @@
                   set to internal
                 </a>
                 <a href="#" data-type="reply" class="article-action u-clickable">
-                  <svg class="article-meta-icon"><use xlink:href="#icon-reply" /></svg>
+                  <%- @Icon('reply', 'article-meta-icon') %>
                   reply
                 </a>
                 <a href="#ticket/create/1/1" data-type="split" class="article-action u-clickable">
-                  <svg class="article-meta-icon"><use xlink:href="#icon-split" /></svg>
+                  <%- @Icon('split', 'article-meta-icon') %>
                   split
                 </a>
               </div>
@@ -283,7 +283,7 @@
                 <div class="horizontal article-meta-row">
                   <div class="article-meta-key">Kanal</div>
                   <div class="article-meta-value">
-                    <svg class="article-meta-icon"><use xlink:href="#icon-note" /></svg>
+                    <%- @Icon('note', 'article-meta-icon') %>
                     note
                   </div>
                 </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/user_list.jst.eco b/app/assets/javascripts/app/views/layout_ref/user_list.jst.eco
index 228abdc58..03931d9b2 100644
--- a/app/assets/javascripts/app/views/layout_ref/user_list.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/user_list.jst.eco
@@ -116,7 +116,7 @@
   </div>
 
   <div class="searchfield">
-    <svg class="icon icon-magnifier"><use xlink:href="#icon-magnifier" /></svg>
+    <%- @Icon('magnifier') %>
     <input class="js-search form-control" name="search" placeholder="Search for users" type="search">
   </div>
 
@@ -163,7 +163,7 @@
           <td><span>Niklas</span></td>
 
           <td class="actionCell no-padding">
-            <div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
+            <div class="btn btn--primary btn--table switchView"><%- @Icon('switchView') %> Aus Benutzeransicht anzeigen</div>
           </td>
         </tr>
 
@@ -175,7 +175,7 @@
           <td><span>Hubermeyerschmidt</span></td>
 
           <td class="actionCell no-padding">
-            <div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
+            <div class="btn btn--primary btn--table switchView"><%- @Icon('switchView') %> Aus Benutzeransicht anzeigen</div>
           </td>
         </tr>
 
@@ -187,7 +187,7 @@
           <td><span>Braun</span></td>
 
           <td class="actionCell no-padding">
-            <div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
+            <div class="btn btn--primary btn--table switchView"><%- @Icon('switchView') %> Aus Benutzeransicht anzeigen</div>
           </td>
         </tr>
 
@@ -199,7 +199,7 @@
           <td><span>Blanko</span></td>
 
           <td class="actionCell no-padding">
-            <div class="btn btn--primary btn--table switchView"><svg class="icon icon-switchView"><use xlink:href="#icon-switchView" /></svg> Aus Benutzeransicht anzeigen</div>
+            <div class="btn btn--primary btn--table switchView"><%- @Icon('switchView') %> Aus Benutzeransicht anzeigen</div>
           </td>
         </tr>
       </tbody>
diff --git a/app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco b/app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco
index 367c14402..c3ec4a1cc 100644
--- a/app/assets/javascripts/app/views/layout_ref/user_profile.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/user_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="profileAction" data-toggle="dropdown">
-          <svg class="dropdown-icon"><use xlink:href="#icon-cog" /></svg>
+          <%- @Icon('cog', 'dropdown-icon') %>
           <label>Aktion</label>
-          <svg class="icon-arrow-down"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use></svg>
+          <%- @Icon('arrow-down') %>
         </div>
         <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="profileAction">
           <li role="presentation"><a role="menuitem" tabindex="-1">Kontaktdaten bearbeiten</a>
@@ -146,14 +146,14 @@
         <div class="stat-title">Status</div>
         <div class="stat-graphic">
           <div class="stat-tickets vertical reverse end">
-            <svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
-            <svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
-            <svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
-            <svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
-            <svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
-            <svg class="one-ticket state-color supergood-state"><use xlink:href="#icon-one-ticket" /></svg>
+            <%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
+            <%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
+            <%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
+            <%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
+            <%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
+            <%- @Icon('one-ticket', 'one-ticket state-color supergood-state') %>
           </div>
-          <svg class="total-tickets"><use xlink:href="#icon-total-tickets" /></svg>
+          <%- @Icon('total-tickets', 'total-tickets') %>
         </div>
         <!-- 
           Achtung: hier müssen wir schauen, dass wir das Widget genauso verwenden wie im Dashboard. Sonst gibt's Verwirrung.
@@ -164,7 +164,7 @@
       <div class="column mood stat-widget vertical">
         <div class="stat-title">Stimmung</div>
         <div class="stat-graphic">
-          <svg class="stat-icon mood-icon"><use xlink:href="#icon-mood-supergood" /></svg>
+          <%- @Icon('mood-supergood', 'stat-icon') %>
         </div>
         <div class="stat-label">3% of my tickets escalated.</div>
         <div class="stat-detail">Average: 17%</div>
diff --git a/app/assets/javascripts/app/views/sla/index.jst.eco b/app/assets/javascripts/app/views/sla/index.jst.eco
index 21c866847..f7093eb3c 100644
--- a/app/assets/javascripts/app/views/sla/index.jst.eco
+++ b/app/assets/javascripts/app/views/sla/index.jst.eco
@@ -27,7 +27,7 @@
         <%- rule %><br>
       <% end %>
     </div>
-    <svg class="action-flow-icon"><use xlink:href="#icon-arrow-right" /></svg>
+    <%- @Icon('arrow-right', 'action-flow-icon') %>
     <div class="action-block action-block--flex">
       <div class="label"><%- @T('Escalation Times') %></div>
       <% if sla.first_response_time: %>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco
index 94e332607..b8bdecf07 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco
@@ -7,24 +7,24 @@
     <div class="js-avatar"></div>
     <div class="editControls-item is-hidden pop-select">
       <div class="editControls-iconHolder centered js-selectedArticleType">
-        <svg class="editControls-icon js-selectedType"><use xlink:href="#icon-<%= @article.type %>" /></svg>
+        <%- @Icon(@article.type, 'editControls-icon js-selectedType') %>
       </div>
       <div class="pop-selector is-hidden js-articleTypes">
         <% for articleType in @articleTypes: %>
         <div class="editControls-icon pop-selectable js-articleTypeItem" data-value="<%= articleType.name %>">
-          <svg class="pop-selectable-icon icon-<%= articleType.icon %>"><use xlink:href="#icon-<%= articleType.icon %>" /></svg>
+          <%- @Icon(articleType.icon, 'pop-selectable-icon') %>
         </div>
         <% end %>
       </div>
     </div>
     <div class="editControls-item is-hidden js-toggleVisibility">
       <div class="editControls-iconHolder">
-        <svg class="editControls-icon icon-internal" title="<%- @Ti("set to public") %>">
-          <use xlink:href="#icon-lock" />
-        </svg>
-        <svg class="editControls-icon icon-public" title="<%- @Ti("set to internal") %>">
-          <use xlink:href="#icon-lock-open" />
-        </svg>
+        <div class="editControls-icon icon-internal" title="<%- @Ti("set to public") %>">
+          <%- @Icon('lock') %>
+        </div>
+        <div class="editControls-icon icon-public" title="<%- @Ti("set to internal") %>">
+          <%- @Icon('lock-open') %>
+        </div>
       </div>
     </div>
   </div>
@@ -69,7 +69,7 @@
                 <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
               </div>
               <div class="attachmentUpload-cancel js-cancel">
-                <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Cancel Upload') %>
+                <%- @Icon('diagonal-cross') %><%- @T('Cancel Upload') %>
               </div>
             </div>
             <div class="attachmentUpload-progressBar" style="width: 0%"></div>