@aquera/nile-elements 1.0.1-beta-1.2 → 1.0.1-beta-1.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.0.1-beta-1.2",
+  "version": "1.0.1-beta-1.4",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-accordion/nile-accordion.ts

@@ -219,10 +219,10 @@ render() {
 
         <span part="summary-icon" class="accordian__summary-icon">
           <slot name="expand-icon">
-            <nile-icon name="arrowright"></nile-icon>
+            <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
           </slot>
           <slot name="collapse-icon">
-            <nile-icon name="arrowright"></nile-icon>
+            <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
           </slot>
         </span>
       </div>

package/src/nile-auto-complete/nile-auto-complete.ts

@@ -85,7 +85,7 @@ export class NileAutoComplete extends NileElement {
           placeholder=${this.placeholder}
           exportparts="input"
         >
-          ${this.loading?html`<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="button-loading-blue-animated"></nile-icon>`:nothing}
+          ${this.loading?html`<nile-icon slot="suffix" color="var(--nile-colors-primary-600)" name="var(--nile-icon-button-loading-blue-animated, var(--ng-icon-button-loading-blue-animated))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>`:nothing}
         </nile-input>
         ${this.menuItems.length > 0 && !this.loading
           ? content

package/src/nile-avatar/nile-avatar.ts

@@ -41,7 +41,7 @@ export class NileAvatar extends NileElement {
   @property({ type: String, reflect: true }) variant:'icon' | 'image' | 'text' = 'text';
 
   /** Gives the icon to the Avatar */
-  @property({ type: String, reflect: true }) icon = 'user';
+  @property({ type: String, reflect: true }) icon = 'var(--nile-icon-user, var(--ng-icon-user-01))';
 
   /** Gives the default Image Letters to the Avatar */
   @property({ type: String, reflect: true }) name: String = '';
@@ -142,9 +142,9 @@ export class NileAvatar extends NileElement {
       part="avatar__content"
       style="
         background-color: ${this.bgColor};
-        color:${this.textColor?this.textColor:"var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500) )"};
-        border: 1px solid ${this.borderColor ? this.borderColor : 'var(--ng-colors-border-secondary)'};
-        border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--ng-colors-border-secondary)'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}"
+        color:${this.textColor?this.textColor:"var(--nile-colors-white-base, var(--ng-colors-text-quaternary-500))"};
+        border: 1px solid ${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'};
+        border-color:${defaultInitials ? `${this.borderColor ? this.borderColor : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}` : 'var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary))'}"
     >
       ${content}
     </div>`
@@ -154,6 +154,7 @@ export class NileAvatar extends NileElement {
     return html`
     <nile-icon
       name="${this.icon}"
+      method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
       color="${this.textColor?this.textColor:'var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500))'}"
       size="${this.getDefaultIconSize()}"
     ></nile-icon>`

package/src/nile-breadcrumb-item/nile-breadcrumb-item.ts

@@ -42,7 +42,7 @@ export class NileBreadcrumbItem extends NileElement {
    * @slot This is a slot test
    */
 
-  @property({ type: String }) separator = 'arrowright';
+  @property({ type: String }) separator = 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))';
 
   private handleClick() {
     if (this.isLast) {
@@ -63,6 +63,7 @@ export class NileBreadcrumbItem extends NileElement {
       <nile-icon
         name=${this.separator}
         aria-label=${this.separator}
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
         color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))"
         class=${classMap({
           'nile-breadcrumb-item__arrow': true,

package/src/nile-button/nile-button.ts

@@ -367,7 +367,8 @@ export class NileButton extends NileElement implements NileFormControl {
                   part="caret"
                   class="button__caret"
                   color="${variantCaretColors[this.variant]}"
-                  name="arrowdown"
+                  name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))"
+                  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                 ></nile-icon>
               `
             : ''}
@@ -424,7 +425,8 @@ export class NileButton extends NileElement implements NileFormControl {
                 part="caret"
                 class="button__caret"
                 color="${variantCaretColors[this.variant]}"
-                name="arrowdown"
+                name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))"
+                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
               ></nile-icon>
             `
           : ''}

package/src/nile-button-filter/nile-button-filter.ts

@@ -79,18 +79,20 @@ export class NileButtonFilter extends NileElement {
         ${!this.isOpen
           ? html` <nile-icon
               slot="suffix"
-              name="arrowdown"
+              name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))"
+              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
               size="16"
               color="black"
             ></nile-icon>`
           : html` <nile-icon
               slot="suffix"
-              name="arrowup"
+              name="var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))"
+              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
               size="16"
               color="black"
             ></nile-icon>`}
 
-        <nile-icon slot="suffix" name="close" size="16" color="black"></nile-icon>
+        <nile-icon slot="suffix" name="var(--nile-icon-close, var(--ng-icon-x-close))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="16" color="black"></nile-icon>
       </nile-button>
     `;
   }

package/src/nile-calendar/nile-calendar.ts

@@ -397,7 +397,8 @@ export class NileCalendar extends NileElement {
         <div class="calendar-header">
           <nile-icon
             class="calendar-header__month-navigation"
-            name="arrowleft"
+            name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             color="black"
             @click="${this.prevMonth}"
           >
@@ -410,7 +411,8 @@ export class NileCalendar extends NileElement {
           >
           <nile-icon
             class="calendar-header__month-navigation"
-            name="arrowright"
+            name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             color="black"
             @click="${this.nextMonth}"
           >

package/src/nile-checkbox/nile-checkbox.css.ts

@@ -187,10 +187,12 @@ export const styles = css`
 
   .checkbox__checked-icon {
     --nile-svg-stroke: white;
+    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
   }
 
   .checkbox__indeterminate-icon {
     --nile-svg-stroke: white;
+    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
   }
 
   .checkbox--disabled .checkbox__checked-icon,
@@ -199,6 +201,7 @@ export const styles = css`
        --nile-checkbox-color-border-standard,
       var(--ng-colors-fg-disabled-subtle)
     );
+    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
   }
 
   .checkbox__helptext-icon {

package/src/nile-checkbox/nile-checkbox.ts

@@ -231,8 +231,9 @@ export class NileCheckbox extends NileElement {
                   class="checkbox__checked-icon"
                   color="white"
                   library="system"
-                  name="tick"
+                  name="var(--nile-icon-tick, var(--ng-icon-check))"
                   size="12"
+                  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                 ></nile-icon>
               `
             : ''}
@@ -243,8 +244,9 @@ export class NileCheckbox extends NileElement {
                   class="checkbox__indeterminate-icon"
                   library="system"
                   color="white"
-                  name="minus"
+                  name="var(--nile-icon-minus, var(--ng-icon-minus))"
                   size="12"
+                  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                 ></nile-icon>
               `
             : ''}

package/src/nile-code-editor/nile-code-editor.ts

@@ -58,7 +58,7 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: String, reflect: true , attribute: true }) value = '';
 
-  @property({ type: String, reflect: true , attribute: true }) expandIcon = "expand-2";
+  @property({ type: String, reflect: true , attribute: true }) expandIcon = "var(--nile-icon-expand-2, var(--ng-icon-expand-06))";
 
   @property({ type: String, reflect: true , attribute: true }) placeholder = "";
 
@@ -237,6 +237,7 @@ export class NileCodeEditor extends NileElement {
         <div @click="${(e: CustomEvent) => this.emit('nile-expand')}" class="expand__icon__container">
           <nile-icon
             name="${this.expandIcon}"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             size="16"
             color="black"
           ></nile-icon>

package/src/nile-dialog/nile-dialog.ts

@@ -319,7 +319,8 @@ export class NileDialog extends NileElement {
                       part="close-button"
                       exportparts="base:close-button__base"
                       class="dialog__close"
-                      name="close"
+                      name="var(--nile-icon-close, var(--ng-icon-x-close))"
+                      method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                       label="close"
                       color="var(--nile-dialog-remove-icon-color, var(--ng-colors-fg-quaternary-400))"
                       @click="${() => this.requestClose('close-button')}"

package/src/nile-drawer/nile-drawer.ts

@@ -360,7 +360,8 @@ export class NileDrawer extends NileElement {
                     <slot name="header-actions"></slot>
                     <nile-icon
                       class="drawer__close"
-                      name="close"
+                      name="var(--nile-icon-close, var(--ng-icon-x-close))"
+                      method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                       label="close"
                       part="close-button"
                       exportparts="base:close-button__base"

package/src/nile-empty-state/nile-empty-state.ts

@@ -35,7 +35,7 @@ export class NileEmptyState extends NileElement {
     | 'content'
     | 'tonal' = 'tonal';
 
-  @property() icon: string = 'error';
+  @property() icon: string = 'var(--nile-icon-error, var(--ng-icon-x-circle))';
   @property({type:Boolean}) grayscale: boolean = false;
 
   @property() text: String = 'Empty State';
@@ -67,10 +67,10 @@ export class NileEmptyState extends NileElement {
               ${!this.icon && !this.svgIconUrl ? nothing : html`
                 <div part="icon-wrapper" class="empty-state__img__icon">
                   ${this.svgIconUrl ? html`
-                    <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+                    <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
                     <!-- <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${this.svgIconColor ? this.svgIconColor : '#ddd'}"></nile-icon> -->
                   ` : html`
-                    <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
+                    <nile-icon name="${this.icon}"  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
                   `}
                 </div>`
               }
@@ -80,9 +80,9 @@ export class NileEmptyState extends NileElement {
           ${this.variant == 'tonal' ? html`
             <div part="tonal-body" class="empty-state__body--tonal">
               ${this.svgIconUrl ? html`
-                <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+                <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
               ` : html`
-                <nile-icon name="${this.icon}" size="40"></nile-icon>
+                <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="40"></nile-icon>
               `}
             </div>`: nothing
           }
@@ -91,9 +91,9 @@ export class NileEmptyState extends NileElement {
             <div part="flat-body" class="empty-state__body--flat">
 					<span class="nile-flat-type-icon">
 						${this.svgIconUrl ? html`
-              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
+              <nile-icon customSvgPath="${this.svgIconUrl}" size="${this.svgIconSize}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" variant="secondary" color="${ifDefined(this.svgIconColor)}" noFill></nile-icon>
             ` : html`
-              <nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
+              <nile-icon name="${this.icon}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
             `}
 					</span>
             </div>`: nothing

package/src/nile-error-message/nile-error-message.ts

@@ -72,12 +72,13 @@ export class NileErrorMessage extends LitElement {
   }
 
   public render(): TemplateResult {
-    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
+    const iconName = this.isExpanded ? 'var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))' : 'var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))';
 
     return html`
       <div class="nile-error-message" part="base">
         <nile-icon
-          name="info2"
+          name="var(--nile-icon-info, var(--ng-icon-info-circle))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="nile-error-message__icon"
           part="icon"
@@ -96,7 +97,7 @@ export class NileErrorMessage extends LitElement {
               class="nile-error-message__more-button"
               @click=${this.toggleExpanded}
               >${this.isExpanded ? 'View Less' : 'View More'}
-              <nile-icon color="var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))" part="icon" size="14" name="${iconName}"></nile-icon>
+              <nile-icon color="var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600))" part="icon" size="14" name="${iconName}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
               </span
             > `:``}
             </div>

package/src/nile-error-notification/nile-error-notification.ts

@@ -53,7 +53,8 @@ export class NileErrorNotification extends LitElement {
     return html`
       <div class="nile-error-notification" part="container">
         <nile-icon
-          name="info2"
+          name="var(--nile-icon-info, var(--ng-icon-info-circle))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="nile-error-notification__icon"
           part="icon"

package/src/nile-file-preview/nile-file-preview.template.ts

@@ -26,7 +26,8 @@ import { removeFile, cancelFileUpload } from './utils';
         </div>
         <slot @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)} name="cancelIcon">
           <nile-icon
-            name="close"
+            name="var(--nile-icon-close, var(--ng-icon-x-close))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             size="14"
             class="icon"
           ></nile-icon>
@@ -58,7 +59,8 @@ export function getHorizontalPreviewState(
       <slot name="cancelIcon">
         <nile-icon
           @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-          name="trash"
+          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="icon"
         ></nile-icon>
@@ -75,7 +77,7 @@ export function getHorizontalNoPreviewState(
     <div class="no-preview horizontal-div">
       <div class="no-preview-container">
         <div class="document-icon">
-          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
+          <nile-icon name="var(--nile-icon-general, var(--ng-icon-file-06))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
         </div>
         <div class="preview-file-info">
           <p>${file.name}</p>
@@ -86,7 +88,8 @@ export function getHorizontalNoPreviewState(
         <slot name="cancelIcon">
           <nile-icon
             @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-            name="trash"
+            name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             size="14"
             class="icon"
           ></nile-icon>
@@ -105,7 +108,7 @@ export function getHorizontalErrorState(
     <div class="error horizontal-div">
       <div class="error-container">
         <div class="error-icon">
-          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
+          <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
         </div>
         <div class="file-info">
           <p>${file.name}</p>
@@ -117,7 +120,8 @@ export function getHorizontalErrorState(
       <slot name="cancelIcon">
           <nile-icon
             @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-            name="close"
+            name="var(--nile-icon-close, var(--ng-icon-x-close))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             size="14"
             class="icon"
           ></nile-icon>
@@ -149,7 +153,8 @@ export function getVerticalUploadingState(
       <slot name="cancelIcon">
         <nile-icon
           @click=${(e: CustomEvent<RemoveFileDetail>) => cancelFileUpload(file, e)}
-          name="close"
+          name="var(--nile-icon-close, var(--ng-icon-x-close))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -182,7 +187,8 @@ export function getVerticalPreviewState(
       <slot name="cancelIcon">
         <nile-icon
           @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-          name="trash"
+          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -198,7 +204,7 @@ export function getVerticalNoPreviewState(
   return html`
     <div class="vertical-div vertical-no-preview">
       <div class="vertical-document-icon">
-        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
+        <nile-icon name="var(--nile-icon-general, var(--ng-icon-file-06))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-600))"></nile-icon>
       </div>
 
       <div class="content-container">
@@ -209,7 +215,8 @@ export function getVerticalNoPreviewState(
       <slot name="cancelIcon">
         <nile-icon
           @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}
-          name="trash"
+          name="var(--nile-icon-trash, var(--ng-icon-trash-01))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="icon corner-icon"
         ></nile-icon>
@@ -226,7 +233,7 @@ export function getVerticalErrorState(
   return html`
     <div class="vertical-div vertical-error">
       <div class="vertical-document-icon error-bg">
-        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
+        <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
       </div>
 
       <div class="file-info-vertical-state">
@@ -238,7 +245,8 @@ export function getVerticalErrorState(
 
       <slot name="cancelIcon" @click=${(e: CustomEvent<RemoveFileDetail>) => removeFile(file, e, originalUrl)}>
         <nile-icon
-          name="close"
+          name="var(--nile-icon-close, var(--ng-icon-x-close))"
+          method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           size="14"
           class="icon corner-icon"
         ></nile-icon>

package/src/nile-file-upload/nile-file-upload.template.ts

@@ -20,7 +20,7 @@ export const getHorizontalDefaultState = (
     <div class=${classMap({ 'hover-border': state === "hover", 'horizontal-div': true })}>
       <div class="inner-div">
         <slot name="uploadIcon">
-          <nile-icon name="upload" size="24"></nile-icon>
+          <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
         </slot>
         <div class="content">
           <slot name="title">
@@ -44,7 +44,7 @@ export const getHorizontalDefaultState = (
     </div>
     ${errorMessage ?
       html`<div class="upload-error">
-        <nile-icon name="warning" size="12" color="red"></nile-icon>
+        <nile-icon name="var(--nile-icon-warning, var(--ng-icon-alert-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="12" color="red"></nile-icon>
         <span>${errorMessage}</span>
       </div>` :
       html``
@@ -62,7 +62,7 @@ export const getHorizontalDisabledtState = (
   >
      <div class="inner-div">
       <slot name="uploadIcon">
-        <nile-icon name="upload" size="24"></nile-icon>
+        <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
       </slot>
       <div class="content">
         <slot name="title">
@@ -91,13 +91,15 @@ export const getHorizontalDragState = (): TemplateResult => html`
     <div class="icons-container">
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="general"
+        name="var(--nile-icon-general, var(--ng-icon-file-06))"
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
         size="20"
         class="general-icon"
       ></nile-icon>
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="image"
+        name="var(--nile-icon-image, var(--ng-icon-image-03))"
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
         size="24"
         class="image-icon"
       ></nile-icon>
@@ -117,7 +119,7 @@ export const getVerticalDefaultState = (
   <div>
     <div class=${classMap({ 'hover-border': state === "hover", 'vertical-div': true })}>
       <slot name="uploadIcon">
-        <nile-icon name="upload" size="24"></nile-icon>
+        <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
       </slot>
       <div class="content-container">
         <slot name="title">
@@ -140,7 +142,7 @@ export const getVerticalDefaultState = (
     </div>
     ${errorMessage ?
       html`<div class="upload-error">
-        <nile-icon name="warning" size="12" color="red"></nile-icon>
+        <nile-icon name="var(--nile-icon-warning, var(--ng-icon-alert-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="12" color="red"></nile-icon>
         <span>${errorMessage}</span>
       </div>` :
       html``
@@ -157,7 +159,7 @@ export const getVerticalDisabledState = (
     class="vertical-deafult vertical-div disable"
   >
     <slot name="uploadIcon">
-      <nile-icon name="upload" size="24"></nile-icon>
+      <nile-icon name="var(--nile-icon-upload, var(--ng-icon-upload-01))" size="24" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
     </slot>
     <div class="content-container">
       <slot name="title">
@@ -185,13 +187,15 @@ export const getVerticalDragState = (): TemplateResult => html`
     <div class="icons-container">
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="general"
+        name="var(--nile-icon-general, var(--ng-icon-file-06))"
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
         size="20"
         class="general-icon"
       ></nile-icon>
       <nile-icon
         color="var(--nile-colors-blue-500)"
-        name="image"
+        name="var(--nile-icon-image, var(--ng-icon-image-03))"
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
         size="24"
         class="image-icon"
       ></nile-icon>

package/src/nile-filter-chip/nile-filter-chip.ts

@@ -104,7 +104,7 @@ export class NileFilterChip extends NileElement {
       ${this.closable
         ? html`
             <span class="close-icon" @click="${this.handleClose}">
-              <nile-icon name="${this.removeIcon || 'close'}" size="12"></nile-icon>
+              <nile-icon name="${this.removeIcon || 'var(--nile-icon-close, var(--ng-icon-x-close))'}" size="12" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
             </span>
           `
         : html``}

package/src/nile-form-error-message/nile-form-error-message.ts

@@ -37,7 +37,7 @@ export class NileFormErrorMessage extends LitElement {
 	public render(): TemplateResult {
 		return html`
       <div class="nile-form-error-message">
-       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))"> </nile-icon> <slot> </slot>
+       <nile-icon name="var(--nile-icon-info, var(--ng-icon-info-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700, var(--ng-colors-fg-error-secondary))"> </nile-icon> <slot> </slot>
         </div>
 			`;
 	}

package/src/nile-form-help-text/nile-form-help-text.ts

@@ -51,7 +51,7 @@ export class NileFormHelpText extends LitElement {
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
+    const iconName = this.isExpanded ? 'var(--nile-icon-arrow-up, var(--ng-icon-chevron-up))' : 'var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))';
 
     return html`
     <div 
@@ -75,7 +75,7 @@ export class NileFormHelpText extends LitElement {
           part="toggle-button"
           @click=${this.toggleExpanded}
         >${this.isExpanded ? 'View Less' : 'View More'}
-          <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}"></nile-icon>
+          <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
         </span>
       `:nothing}
     </div>

package/src/nile-hero/nile-hero.ts

@@ -20,7 +20,7 @@ import { classMap } from 'lit/directives/class-map.js';
  */
 @customElement('nile-hero')
 export class NileHero extends NileElement {
-	@property({ reflect: true }) icon: string = 'action';
+	@property({ reflect: true }) icon: string = 'var(--nile-icon-action, var(--ng-icon-action))';
 	@property({ reflect: true, type: Boolean }) collapse: boolean = false;
 
 	@property({ reflect: true, attribute: 'img-src' }) imgSrc: string = '';
@@ -52,7 +52,7 @@ export class NileHero extends NileElement {
 			<div class="hero__slot__container" style="opacity:${this.collapse?0:1}">
 			 <div class="hero__slot">
 			 	<span class="icon__container">
-					<nile-icon size="16" method="stroke" name="${this.icon}"></nile-icon>
+					<nile-icon size="16" method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))" name="${this.icon}"></nile-icon>
 				</span>
 				<slot></slot>
 			 </div>

package/src/nile-hero-header/nile-hero-header.ts

@@ -19,7 +19,7 @@ import NileElement from '../internal/nile-element';
  */
 @customElement('nile-hero-header')
 export class NileHeroHeader extends NileElement {
-	@property({ reflect: true }) icon: string = 'action';
+	@property({ reflect: true }) icon: string = 'var(--nile-icon-action, var(--ng-icon-action))';
 	@property({ reflect: true, attribute: 'hero-text' }) heroText: string = 'Nile Hero';
 
 	/**
@@ -41,7 +41,7 @@ export class NileHeroHeader extends NileElement {
 	public render(): TemplateResult {
 		return html`
 				<span class="icon__container">
-					<nile-icon method="stroke" size="16" name="${this.icon}"></nile-icon>
+					<nile-icon method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))" size="16" name="${this.icon}"></nile-icon>
 				</span>
 				<span class="hero__text">${this.heroText}</span>
 			`;