> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Icon

> Documentation for Icon

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const iconPreviewJson = {
  "type": "icon",
  "icon": "home",
  "size": 24,
  "color": "#000000",
  "semanticLabel": "Home Icon",
  "textDirection": "ltr"
};
export const iconPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac Icon allows you to build a Flutter icon widget using JSON.
To know more about the icon widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Icon-class.html).

## Properties

| Property      | Type                | Description                                                         |
| ------------- | ------------------- | ------------------------------------------------------------------- |
| icon          | `String`            | The name of the icon to display.                                    |
| iconType      | `StacIconType`      | The type of the icon (material, cupertino). Defaults to `material`. |
| size          | `double`            | The size of the icon.                                               |
| color         | `StacColor`         | The color of the icon.                                              |
| semanticLabel | `String`            | The semantic label for the icon.                                    |
| textDirection | `StacTextDirection` | The text direction for the icon.                                    |

> Note: To check the available icons, refer to  [Icon utils](https://github.com/StacDev/stac/blob/dev/packages/stac/lib/src/utils/icon_utils.dart).

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacIcon(
      icon: 'home',
      size: 24.0,
      color: StacColors.black,
      semanticLabel: 'Home Icon',
      textDirection: StacTextDirection.ltr,
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "icon",
      "icon": "home",
      "size": 24,
      "color": "#000000",
      "semanticLabel": "Home Icon",
      "textDirection": "ltr"
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={iconPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: iconPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>