From 2f188d23bae1c199f44d5e215636fe1682704796 Mon Sep 17 00:00:00 2001
From: Karel Persoons <karel@brenner.company>
Date: Fri, 5 Mar 2021 19:47:19 +0100
Subject: [PATCH 1/5] Replace vl-icon occurrences (part 1)

---
 .../components/access-level-pill/template.hbs |  5 ++---
 .../agenda-detail/sidebar-item/template.hbs   |  5 +----
 .../agenda-overview-item/template.hbs         |  4 +---
 .../agendaitem-approvals/template.hbs         | 20 +++++++------------
 4 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/app/pods/components/access-level-pill/template.hbs b/app/pods/components/access-level-pill/template.hbs
index 41dadadefb..9729e302fe 100644
--- a/app/pods/components/access-level-pill/template.hbs
+++ b/app/pods/components/access-level-pill/template.hbs
@@ -60,10 +60,9 @@
             {{t "document-is-confidential"}}
           </p>
         </EmberTooltip>
-        <i class="vl-icon ki-lock-closed vl-u-text--error"
-        ></i>
+        <WebComponents::AuIcon @name="lock-closed" @iconSkinColor="danger" />
       {{else}}
-        <i class="vl-icon ki-lock-open"></i>
+        <WebComponents::AuIcon @name="lock-open" />
       {{/if}}
     </button>
   {{/if}}
diff --git a/app/pods/components/agenda/agenda-detail/sidebar-item/template.hbs b/app/pods/components/agenda/agenda-detail/sidebar-item/template.hbs
index 7f3edcb965..15241ac58d 100644
--- a/app/pods/components/agenda/agenda-detail/sidebar-item/template.hbs
+++ b/app/pods/components/agenda/agenda-detail/sidebar-item/template.hbs
@@ -62,10 +62,7 @@
                 {{/if}}
 
                 {{#if (await subcase.confidential)}}
-                  <i
-                    class="vl-icon ki-lock-closed vlc-u-opacity-50"
-                    data-test-icon-agenda-confidentiality-locked
-                  ></i>
+                  <WebComponents::AuIcon @name="lock-closed" data-test-icon-agenda-confidentiality-locked />
                 {{/if}}
               {{/if}}
             </div>
diff --git a/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs b/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs
index 3c40cddd51..990afcc2b9 100644
--- a/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs
+++ b/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs
@@ -208,9 +208,7 @@
                   </div>
                   {{#if subcase.confidential}}
                     <span type="button" class="vlc-agenda-items__confidentiality-button vlc-pill vlc-pill--error">
-                      <i class="vl-icon ki-lock-closed vlc-agenda-items__icons"
-                         data-test-icon-agenda-confidentiality-locked
-                      ></i>
+                      <WebComponents::AuIcon @name="lock-closed" class="vlc-agenda-items__icons" data-test-icon-agenda-confidentiality-locked />{{!-- TODO: needs `vlc-agenda-items__icons` class passed? --}}
                       {{t "confidential"}}
                     </span>
                   {{/if}}
diff --git a/app/pods/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals/template.hbs b/app/pods/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals/template.hbs
index 64721dfe57..ea18739a4f 100644
--- a/app/pods/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals/template.hbs
+++ b/app/pods/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals/template.hbs
@@ -47,21 +47,15 @@
             <td>
               {{#if (not isEditing)}}
                 {{#if (await mandateeApproval.approval)}}
-                  <p class="vl-icon-wrapper vl-u-text--success">
-                    <span class="vl-icon vl-icon--before ki-check" aria-hidden="true"></span>
-                    <span class="vl-annotation">
+                  <WebComponents::AuIcon @name="check" @iconSkinColor="success" />
+                  <span class="vl-annotation vl-u-text--success">
                       {{t "approval-mandatee"}}
-                    </span>
-                  </p>
+                  </span>
                 {{else}}
-                  <p class="vl-icon-wrapper vl-u-text--muted">
-                    <i class="vl-icon vl-icon--before ki-remove"
-                          aria-hidden="true"
-                    ></i>
-                    <span>
-                      {{t "not-yet-approval-mandatee"}}
-                    </span>
-                  </p>
+                  <WebComponents::AuIcon @name="remove" @iconSkinColor="muted" />
+                  <span class="vl-u-text--muted">
+                    {{t "not-yet-approval-mandatee"}}
+                  </span>
                 {{/if}}
               {{else}}
                 <div class="vlc-input-field-block">

From dc4897e0cef9948f0bbd8c1f4f1aa8f5d2d03bde Mon Sep 17 00:00:00 2001
From: Karel Persoons <karel@brenner.company>
Date: Mon, 8 Mar 2021 12:41:04 +0100
Subject: [PATCH 2/5] Fix lint error

---
 .../agendaitem-case/agendaitem-approvals/template.hbs           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pods/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals/template.hbs b/app/pods/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals/template.hbs
index ea18739a4f..1947c4fe82 100644
--- a/app/pods/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals/template.hbs
+++ b/app/pods/components/agenda/agendaitem/agendaitem-case/agendaitem-approvals/template.hbs
@@ -49,7 +49,7 @@
                 {{#if (await mandateeApproval.approval)}}
                   <WebComponents::AuIcon @name="check" @iconSkinColor="success" />
                   <span class="vl-annotation vl-u-text--success">
-                      {{t "approval-mandatee"}}
+                    {{t "approval-mandatee"}}
                   </span>
                 {{else}}
                   <WebComponents::AuIcon @name="remove" @iconSkinColor="muted" />

From e5cb91036b76466c8dced80d8a7daaffe6479e18 Mon Sep 17 00:00:00 2001
From: Karel Persoons <karel@brenner.company>
Date: Mon, 8 Mar 2021 12:41:41 +0100
Subject: [PATCH 3/5] Replace vl-icon occurrences (part 2)

---
 app/pods/components/documents/document-card/template.hbs    | 2 +-
 .../components/documents/linked-document-link/template.hbs  | 5 ++---
 .../subcase/subcase-case/subcase-titles/template.hbs        | 6 ++----
 app/pods/components/subcases/subcase-item/template.hbs      | 4 ++--
 app/pods/components/utils/pieces-list-for-item/template.hbs | 4 ++--
 .../components/utils/pieces-list-lazy-loaded/template.hbs   | 4 ++--
 app/pods/components/web-components/vl-document/template.hbs | 2 +-
 .../components/web-components/vl-mandatee-link/template.hbs | 2 +-
 8 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/app/pods/components/documents/document-card/template.hbs b/app/pods/components/documents/document-card/template.hbs
index 74d883310d..baeee59bb5 100644
--- a/app/pods/components/documents/document-card/template.hbs
+++ b/app/pods/components/documents/document-card/template.hbs
@@ -87,7 +87,7 @@
               "vlc-document-list__item vlc-document-list__item--active"
             }}"
           >
-            <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium vl-icon-wrapper">
+            <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium">
               <i class="vl-badge__icon ki-document" aria-hidden="true"></i>
             </div>
           </div>
diff --git a/app/pods/components/documents/linked-document-link/template.hbs b/app/pods/components/documents/linked-document-link/template.hbs
index 557bb11061..85f0d3d825 100644
--- a/app/pods/components/documents/linked-document-link/template.hbs
+++ b/app/pods/components/documents/linked-document-link/template.hbs
@@ -1,7 +1,7 @@
 <div class="vlc-document-card auk-u-mb-2" data-test-document-card>
   <div class="vlc-document-card__summary">
     <div class="vlc-document-card__badge">
-      <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium vl-icon-wrapper">
+      <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium">
         <i class="vl-badge__icon ki-document" aria-hidden="true"></i>
       </div>
     </div>
@@ -33,8 +33,7 @@
                 type="button"
                 {{on "click" this.deletePieceLink}}
               >
-                <i class="vl-icon ki-link-broken vl-u-text--error"
-                ></i>
+                <WebComponents::AuIcon @name="link-broken" @iconSkinColor="danger" />
               </button>
             {{/if}}
           </div>
diff --git a/app/pods/components/subcase/subcase-case/subcase-titles/template.hbs b/app/pods/components/subcase/subcase-case/subcase-titles/template.hbs
index c444a2b587..a97da576d7 100644
--- a/app/pods/components/subcase/subcase-case/subcase-titles/template.hbs
+++ b/app/pods/components/subcase/subcase-case/subcase-titles/template.hbs
@@ -51,11 +51,9 @@
     data-test-agenda-subcasehidden-pill
   >
     {{#if (await subcase.confidential)}}
-      <i class="vlc-pill vl-icon vlc-pill--error ki-lock-closed"></i>
+      <WebComponents::AuPill @skin="danger" @layout="icon-only" @icon="lock-closed"/>
     {{else}}
-      <i
-        class="vlc-pill auk-u-mr-2 vl-icon vlc-pill--success ki-lock-open"
-      ></i>
+      <WebComponents::AuPill @skin="success" @layout="icon-only" @icon="lock-open"/>
     {{/if}}
   </div>
 </div>
diff --git a/app/pods/components/subcases/subcase-item/template.hbs b/app/pods/components/subcases/subcase-item/template.hbs
index 1684a02c5a..5147c6c0fb 100644
--- a/app/pods/components/subcases/subcase-item/template.hbs
+++ b/app/pods/components/subcases/subcase-item/template.hbs
@@ -1,9 +1,9 @@
 <div class="vlc-procedure-step__badge-wrapper">
   {{#if (is-pending subcase.approved)}}
-    <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium vl-icon-wrapper vl-icon-wrapper-loading"
+    <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium"
     ></div>
   {{else if (await subcase.approved)}}
-    <div class="vl-badge vl-badge--icon vl-badge--success vlc-procedure-step__badge vl-badge--alt vl-badge--small-medium vl-icon-wrapper"
+    <div class="vl-badge vl-badge--icon vl-badge--success vlc-procedure-step__badge vl-badge--alt vl-badge--small-medium"
     >
       <i class="vl-badge__icon ki-check" aria-hidden="true"></i>
     </div>
diff --git a/app/pods/components/utils/pieces-list-for-item/template.hbs b/app/pods/components/utils/pieces-list-for-item/template.hbs
index af6ead1dd5..7b1967f91b 100644
--- a/app/pods/components/utils/pieces-list-for-item/template.hbs
+++ b/app/pods/components/utils/pieces-list-for-item/template.hbs
@@ -25,8 +25,8 @@
   </div>
   {{#if this.moreThan20}}
     <button class="vlc-document-show-more-button" type="button" {{action "toggleShowingAll"}}>
-      <i class="{{if isShowingAll "ki-remove" "ki-plus"}} vl-icon vlc-document-show-more-button__icon "/>
-      <p  class="vlc-document-show-more-button__text">
+      <WebComponents::AuIcon @name={{if isShowingAll "remove" "plus"}} />
+      <p class="vlc-document-show-more-button__text auk-u-ml">
         {{#if isShowingAll }}
           {{t "show-less"}}
         {{else}}
diff --git a/app/pods/components/utils/pieces-list-lazy-loaded/template.hbs b/app/pods/components/utils/pieces-list-lazy-loaded/template.hbs
index b180a30fe5..e7985fc382 100644
--- a/app/pods/components/utils/pieces-list-lazy-loaded/template.hbs
+++ b/app/pods/components/utils/pieces-list-lazy-loaded/template.hbs
@@ -21,8 +21,8 @@
 </div>
 {{#if this.moreThan20}}
   <button class="vlc-document-show-more-button" type="button" {{action "toggleShowingAll"}}>
-    <i class="{{if this.isShowingAll "ki-remove" "ki-plus"}} vl-icon vlc-document-show-more-button__icon "/>
-    <p  class="vlc-document-show-more-button__text">
+    <WebComponents::AuIcon @name={{if this.isShowingAll "remove" "plus"}} />
+    <p class="vlc-document-show-more-button__text">
       {{#if this.isShowingAll }}
         {{t "show-less"}}
       {{else}}
diff --git a/app/pods/components/web-components/vl-document/template.hbs b/app/pods/components/web-components/vl-document/template.hbs
index 382feae261..3c2b31a5a6 100644
--- a/app/pods/components/web-components/vl-document/template.hbs
+++ b/app/pods/components/web-components/vl-document/template.hbs
@@ -70,7 +70,7 @@
       </div>
     {{/if}}
     <div class="vlc-document-card-item__icon">
-      <i class="vl-icon vl-icon--large ki-timeline" aria-hidden="true"></i>
+      <WebComponents::AuIcon @name="timeline" @size="large" />
     </div>
     {{#if this.isVerifyingDelete}}
       <WebComponents::VlModalVerify
diff --git a/app/pods/components/web-components/vl-mandatee-link/template.hbs b/app/pods/components/web-components/vl-mandatee-link/template.hbs
index 2cd98b2f92..bc0aba9fd9 100644
--- a/app/pods/components/web-components/vl-mandatee-link/template.hbs
+++ b/app/pods/components/web-components/vl-mandatee-link/template.hbs
@@ -1,5 +1,5 @@
 <div class="auk-u-mr-2">
-  <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium vl-icon-wrapper"
+  <div class="vl-badge vl-badge--icon vl-badge--alt vl-badge--small-medium"
   >
     <i class="vl-badge__icon ki-user" aria-hidden="true"></i>
   </div>

From bbc398c1d1ea7dfe44538cfc5d83ca78419d111a Mon Sep 17 00:00:00 2001
From: Karel Persoons <karel@brenner.company>
Date: Mon, 8 Mar 2021 12:42:18 +0100
Subject: [PATCH 4/5] Remove vl-icon code source and additional rules

---
 app/styles/app.scss                           |  1 -
 app/styles/custom-application/loader.scss     |  5 -----
 .../custom-components/_vlc-document-card.scss |  2 +-
 .../custom-components/_vlc-side-nav.scss      |  9 --------
 app/styles/govflanders/components/_icon.scss  | 21 -------------------
 5 files changed, 1 insertion(+), 37 deletions(-)
 delete mode 100644 app/styles/govflanders/components/_icon.scss

diff --git a/app/styles/app.scss b/app/styles/app.scss
index e50418d251..f01f6ca940 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -32,7 +32,6 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'govflanders/components/_document';
 @import 'govflanders/components/_form-message';
 @import 'govflanders/components/_form-structure';
-@import 'govflanders/components/_icon';
 @import 'govflanders/components/_input-addon';
 @import 'govflanders/components/_input-field';
 @import 'govflanders/components/_input-group';
diff --git a/app/styles/custom-application/loader.scss b/app/styles/custom-application/loader.scss
index 457b07f673..3946957aad 100644
--- a/app/styles/custom-application/loader.scss
+++ b/app/styles/custom-application/loader.scss
@@ -5,8 +5,3 @@
   height: $base-font-size;
   width: 100px;
 }
-
-.vl-icon-wrapper-loading {
-  display: flex;
-  align-items: center;
-}
\ No newline at end of file
diff --git a/app/styles/custom-components/_vlc-document-card.scss b/app/styles/custom-components/_vlc-document-card.scss
index 261b72e96a..225a98b8c9 100644
--- a/app/styles/custom-components/_vlc-document-card.scss
+++ b/app/styles/custom-components/_vlc-document-card.scss
@@ -55,7 +55,7 @@
 .vlc-document-card-item__icon {
   position: absolute;
   left: -4rem;
-  top: 0.3rem;
+  top: 0.6rem;
   color: $primary-blue;
 }
 
diff --git a/app/styles/custom-components/_vlc-side-nav.scss b/app/styles/custom-components/_vlc-side-nav.scss
index 28e5e587a4..307f8fbced 100644
--- a/app/styles/custom-components/_vlc-side-nav.scss
+++ b/app/styles/custom-components/_vlc-side-nav.scss
@@ -11,15 +11,6 @@
     display: flex;
     align-items: center;
     margin-right: .8rem;
-
-    .vl-icon {
-      &:before {
-        position: relative;
-        top: 2.2px;
-      }
-      font-size: 1.8rem;
-      margin-right: .4rem;
-    }
   }
 
   // Small fix to center icon in toggle
diff --git a/app/styles/govflanders/components/_icon.scss b/app/styles/govflanders/components/_icon.scss
deleted file mode 100644
index 8b3b52d451..0000000000
--- a/app/styles/govflanders/components/_icon.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.vl-icon-wrapper {
-  display: flex;
-
-  .vl-icon {
-    display: inline-flex;
-  }
-}
-
-.vl-icon {
-  font-size: 1em;
-  display: inline;
-  color: inherit;
-
-  &--large {
-    font-size: 1.2em;
-  }
-
-  &--before {
-    margin-right: 0.5em;
-  }
-}

From 1886a3b7462963bc8f0441c80ea75fdc1e4d49ce Mon Sep 17 00:00:00 2001
From: Karel Persoons <karel@brenner.company>
Date: Mon, 8 Mar 2021 12:58:06 +0100
Subject: [PATCH 5/5] Convert icon component to plain HTML

---
 .../agenda/agenda-overview/agenda-overview-item/template.hbs  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs b/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs
index 990afcc2b9..39f6b72894 100644
--- a/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs
+++ b/app/pods/components/agenda/agenda-overview/agenda-overview-item/template.hbs
@@ -208,7 +208,9 @@
                   </div>
                   {{#if subcase.confidential}}
                     <span type="button" class="vlc-agenda-items__confidentiality-button vlc-pill vlc-pill--error">
-                      <WebComponents::AuIcon @name="lock-closed" class="vlc-agenda-items__icons" data-test-icon-agenda-confidentiality-locked />{{!-- TODO: needs `vlc-agenda-items__icons` class passed? --}}
+                      <div class="auk-icon auk-icon--default vlc-agenda-items__icons" data-test-icon-agenda-confidentiality-locked>
+                        <i class="ki ki-lock-closed"></i>
+                      </div>
                       {{t "confidential"}}
                     </span>
                   {{/if}}