@testgorilla/tgo-ui 2.9.0 → 2.10.1

package/projects/tgo-canopy-ui/components/icons-showcase/__snapshots__/icons-showcase.component.spec.ts.snap

@@ -0,0 +1,3487 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconsShowcaseComponent should render correctly 1`] = `
+<ui-icons-showcase
+  applicationTheme={[Function String]}
+  defaultAppTheme="null"
+  icons={[Function Object]}
+>
+  <div
+    class="icons-section"
+  >
+    <h1>
+      Actions
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Archive-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Archive-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Attach-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Attach-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Clone-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Clone-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Close-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Close-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Copy-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Copy-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Delete-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Delete-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Download-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Download-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Edit-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Edit-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Edit-text-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Edit-text-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Filter-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Filter-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Full-screen-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Full-screen-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Grab-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Grab-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Hide-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Hide-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Invite-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Invite-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Link-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Link-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Lock-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Lock-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Logout-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Logout-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Menu-burger-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Menu-burger-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Menu-ellipsis-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Menu-ellipsis-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Minimize-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Minimize-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Pause-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Pause-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Play-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Play-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Record-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Record-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Reject-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Reject-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Reset-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Reset-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-half-star-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Search-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Search-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Send-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Send-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Settings-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Settings-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Share-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Share-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Stop-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Stop-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Switch-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Switch-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Unarchive-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Unarchive-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Unlock-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Unlock-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Upgrade-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Upgrade-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Upload-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Upload-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-add-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-add-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        View-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        View-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Zoom-in-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Zoom-in-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Zoom-out-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Zoom-out-in-line 
+      </li>
+    </ul>
+  </div><div
+    class="icons-section"
+  >
+    <h1>
+      Assessment
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Assessment-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Assessment-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Attempts-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Attempts-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Candidates-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Candidates-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Code-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Code-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Essay-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Essay-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Language-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Language-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Learn-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Learn-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Level-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Level-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Localization-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Localization-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Mic-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Mic-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Multi-choice-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Multi-choice-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Question-count-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Question-count-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Question-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Question-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Speedometer-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Speedometer-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Test-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Test-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Timer-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Timer-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Type-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Type-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Video-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Video-in-line 
+      </li>
+    </ul>
+  </div><div
+    class="icons-section"
+  >
+    <h1>
+      Communication
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Book-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Book-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Calendar-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Calendar-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Chat-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Chat-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Company-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Company-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Devices-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Devices-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Document-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Document-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Employee-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Employee-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Experience-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Experience-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fire-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fire-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Folder-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Folder-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gender-female-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gender-female-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gender-male-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gender-male-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gift-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gift-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Image-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Image-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Integration-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Integration-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Layout-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Layout-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Light-bulb-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Light-bulb-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Location-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Location-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Mouse-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Mouse-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Notification-bell-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Notification-bell-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Password-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Password-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Path-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Path-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Plan-billing-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Plan-billing-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Premium-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Premium-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Premium-circle-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Secure-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Secure-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Sparkle-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Sparkle-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Sync-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Sync-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Team-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Team-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-access-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-access-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-profile-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-profile-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Volume-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Volume-in-line 
+      </li>
+    </ul>
+  </div><div
+    class="icons-section"
+  >
+    <h1>
+      Directional
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-down-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-down-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-left-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-left-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-right-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-right-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-up-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-up-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-down-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-down-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-up-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-up-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fast-forward-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fast-forward-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fast-rewind-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fast-rewind-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Minus-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Minus-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Plus-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Plus-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Skip-next-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Skip-next-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Skip-previous-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Skip-previous-in-line 
+      </li>
+    </ul>
+  </div><div
+    class="icons-section"
+  >
+    <h1>
+      Social
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Facebook-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Facebook-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Google-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Google-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Instagram-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Instagram-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Linkedin-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Linkedin-in-line 
+      </li>
+    </ul>
+  </div><div
+    class="icons-section"
+  >
+    <h1>
+      Status
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Check-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Check-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Check-round-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Check-round-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Error-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Error-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Help-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Help-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Info-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Info-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Refer-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Refer-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-1-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-1-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-2-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-2-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-3-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-3-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-4-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-4-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-5-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-5-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-half-star-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-half-star-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-star-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-star-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Warning-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Warning-in-line 
+      </li>
+    </ul>
+  </div>
+</ui-icons-showcase>
+`;
+
+exports[`IconsShowcaseComponent should render correctly 2`] = `
+<ui-icons-showcase
+  applicationTheme={[Function String]}
+  defaultAppTheme="null"
+  icons={[Function Object]}
+>
+  <div
+    class="icons-section"
+  >
+    <h1>
+      Actions
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Archive-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Archive-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Attach-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Attach-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Clone-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Clone-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Close-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Close-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Copy-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Copy-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Delete-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Delete-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Download-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Download-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Edit-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Edit-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Edit-text-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Edit-text-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Filter-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Filter-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Full-screen-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Full-screen-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Grab-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Grab-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Hide-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Hide-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Invite-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Invite-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Link-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Link-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Lock-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Lock-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Logout-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Logout-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Menu-burger-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Menu-burger-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Menu-ellipsis-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Menu-ellipsis-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Minimize-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Minimize-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Pause-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Pause-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Play-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Play-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Record-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Record-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Reject-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Reject-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Reset-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Reset-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-half-star-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Search-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Search-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Send-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Send-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Settings-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Settings-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Share-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Share-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Stop-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Stop-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Switch-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Switch-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Unarchive-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Unarchive-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Unlock-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Unlock-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Upgrade-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Upgrade-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Upload-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Upload-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-add-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-add-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        View-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        View-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Zoom-in-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Zoom-in-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Zoom-out-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Zoom-out-in-line 
+      </li>
+    </ul>
+  </div><div
+    class="icons-section"
+  >
+    <h1>
+      Assessment
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Assessment-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Assessment-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Attempts-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Attempts-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Candidates-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Candidates-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Code-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Code-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Essay-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Essay-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Language-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Language-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Learn-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Learn-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Level-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Level-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Localization-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Localization-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Mic-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Mic-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Multi-choice-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Multi-choice-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Question-count-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Question-count-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Question-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Question-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Speedometer-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Speedometer-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Test-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Test-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Timer-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Timer-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Type-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Type-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Video-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Video-in-line 
+      </li>
+    </ul>
+  </div><div
+    class="icons-section"
+  >
+    <h1>
+      Communication
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Book-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Book-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Calendar-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Calendar-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Chat-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Chat-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Company-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Company-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Devices-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Devices-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Document-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Document-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Employee-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Employee-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Experience-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Experience-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fire-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fire-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Folder-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Folder-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gender-female-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gender-female-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gender-male-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gender-male-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gift-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Gift-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Image-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Image-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Integration-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Integration-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Layout-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Layout-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Light-bulb-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Light-bulb-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Location-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Location-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Mouse-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Mouse-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Notification-bell-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Notification-bell-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Password-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Password-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Path-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Path-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Plan-billing-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Plan-billing-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Premium-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Premium-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Premium-circle-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Secure-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Secure-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Sparkle-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Sparkle-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Sync-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Sync-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Team-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Team-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-access-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-access-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-profile-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        User-profile-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Volume-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Volume-in-line 
+      </li>
+    </ul>
+  </div><div
+    class="icons-section"
+  >
+    <h1>
+      Directional
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-down-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-down-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-left-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-left-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-right-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-right-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-up-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-chevron-up-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-down-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-down-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-up-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Arrow-up-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fast-forward-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fast-forward-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fast-rewind-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Fast-rewind-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Minus-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Minus-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Plus-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Plus-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Skip-next-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Skip-next-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Skip-previous-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Skip-previous-in-line 
+      </li>
+    </ul>
+  </div><div
+    class="icons-section"
+  >
+    <h1>
+      Social
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Facebook-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Facebook-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Google-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Google-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Instagram-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Instagram-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Linkedin-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Linkedin-in-line 
+      </li>
+    </ul>
+  </div><div
+    class="icons-section"
+  >
+    <h1>
+      Status
+    </h1>
+    <ul
+      class="icons-showcase"
+    >
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Check-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Check-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Check-round-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Check-round-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Error-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Error-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Help-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Help-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Info-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Info-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Refer-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Refer-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-1-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-1-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-2-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-2-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-3-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-3-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-4-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-4-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-5-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-emoji-5-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-half-star-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-half-star-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-star-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Review-star-in-line 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Warning-filled 
+      </li>
+      <li>
+        <ui-icon
+          color="rebrand-black"
+          size="24"
+        />
+        Warning-in-line 
+      </li>
+    </ul>
+  </div>
+</ui-icons-showcase>
+`;