fix(core): update

ts_web/elements/dees-icon.ts

@@ -29,6 +29,7 @@ import {
   faMessage as faMessageRegular,
   faPaste as faPasteRegular,
   faSun as faSunRegular,
+  faTrashCan as faTrashCanRegular,
 } from '@fortawesome/free-regular-svg-icons';
 import {
   faArrowRight as faArrowRightSolid,
@@ -57,8 +58,11 @@ import {
   faUsers as faUsersSolid,
   faShare as faShareSolid,
   faSun as faSunSolid,
+  faTrash as faTrashSolid,
+  faTrashCan as faTrashCanSolid,
   faXmark as faXmarkSolid,
 } from '@fortawesome/free-solid-svg-icons';
+import { demoFunc } from './dees-icon.demo.js';
 
 export const faIcons = {
   // normal
@@ -111,6 +115,11 @@ export const faIcons = {
   shareSolid: faShareSolid,
   sun: faSunRegular,
   sunSolid: faSunSolid,
+  trash: faTrashSolid,
+  trashSolid: faTrashSolid,
+  trashCan: faTrashCanRegular,
+  trashCanSolid: faTrashCanSolid,
+  users: faUsersSolid,
   xmark: faXmarkSolid,
   xmarkSolid: faXmarkSolid,
   // brands
@@ -122,7 +131,6 @@ export const faIcons = {
   slack: faSlackHash,
   tiktok: faTiktok,
   twitter: faTwitter,
-  users: faUsersSolid,
 };
 
 export type TIconKey = keyof typeof faIcons;
@@ -135,24 +143,7 @@ declare global {
 
 @customElement('dees-icon')
 export class DeesIcon extends DeesElement {
-  public static demo = () => html`
-    <dees-icon iconName="visibility"></dees-icon>
-    <div style="background: #fff; padding: 10px; font-size: 30px">
-      <style>
-        dees-icon {
-          transition: color 0.05s;
-        }
-        dees-icon:hover {
-          color: #e4002b;
-        }
-      </style>
-      <dees-icon .iconFA=${'messageSolid'}></dees-icon>
-      <dees-icon .iconFA=${'sun'}></dees-icon>
-      <dees-icon .iconFA=${'sunSolid'}></dees-icon>
-      <dees-icon .iconFA=${'facebook'}></dees-icon>
-      <dees-icon .iconFA=${'arrowUpRightFromSquare'}></dees-icon>
-    </div>
-  `;
+  public static demo = demoFunc;
 
   @property({
     type: String