# Icon


## Examples

### Default

```html
<m-icon
      name=${args.name as IconName}
      size=${args.size as IconSize}
      label=${args.label || ""}
      color=${args.color || ""}
    ></m-icon>
```

### Sizes

```html
${Object.values(IconSize).map(
      (size) => html` <m-icon name=${args.name as IconName} size=${size}></m-icon> `
    )}
```

### WithLabel

```html
<m-icon
      name=${args.name as IconName}
      size=${args.size as IconSize}
      color=${args.color || ""}
      label=${args.label || ""}
    ></m-icon>
```

### IconGallery

```html
<div class="icon-gallery">
      ${(() => {
        const searchInputRef = createRef<HTMLInputElement>();
        const iconContainerRef = createRef<HTMLDivElement>();

        const updateIcons = () => {
          const searchTerm = searchInputRef.value?.value.toLowerCase() || "";
          const iconContainer = iconContainerRef.value;

          if (iconContainer) {
            console.log(searchTerm);
            const iconItems = iconContainer.querySelectorAll(
              ".icon-gallery-item-container"
            );
            iconItems.forEach((item) => {
              const iconName =
                item.getAttribute("data-icon-name")?.toLowerCase() || "";
              if (iconName.includes(searchTerm)) {
                item.classList.remove("hidden");
              } else {
                item.classList.add("hidden");
              }
            });
          }
        };

        return html`
          <input
            ${ref(searchInputRef)}
            class="icon-gallery-search"
            type="text"
            placeholder="Search icons..."
            @input=${updateIcons}
          />
          <ul ${ref(iconContainerRef)} class="icon-gallery-container">
            ${Object.keys(IconName).map(
              (iconName: string) => html`
                <li
                  class="icon-gallery-item-container"
                  data-icon-name=${iconName}
                >
                  <m-icon
                    class="icon-gallery-item"
                    name=${iconName as IconName}
                    size="xl"
                  ></m-icon>
                  <p class="icon-gallery-item-name">${iconName}</p>
                  <button
                    class="copy-button"
                    @click=${() => {
                      navigator.clipboard.writeText(
                        `<m-icon name="${iconName}"></m-icon>`
                      );
                    }}
                  >
                    Copy
                  </button>
                </li>
              `
            )}
          </ul>
        `;
      })()}
    </div>
```

## Usage

**Use the Icon Component to:**

- Represent actions (e.g., Edit, Delete, Download).
- Indicate statuses (e.g., Success, Error, Warning).
- Provide visual clarity to buttons, links, and menus.
- Enhance labels and navigation in toolbars, dashboards, and sidebars.
- Improve scalability and performance by using vector-based icons.

**Do not use the Icon Component to:**

- Display large, decorative illustrations (use Image or Illustration components instead).
- Replace all text labels with icons alone (icons should supplement text, not replace it).
- Use external images or rasterized icons (SVG icons should be preferred for scalability).

## Other Considerations

Use consistent iconography to avoid confusion (e.g., a trash can should always represent "Delete").
Icons should inherit text color when used inline for easy theming.
Support size variations (small, medium, large) for different use cases.

## Design Rationale
Scalability: SVG icons remain sharp at any resolution.
Consistency: A standardized component ensures a uniform visual language.
Accessibility: Structured implementation improves usability for assistive technologies.
Performance Optimization: SVGs load faster and consume fewer resources than images.