Alexa Icon


Displays an icon in Alexa Vector Graphic (AVG) format. You can use an icon from an Amazon-provided library of icons, or provide your own.

Import the alexa-icon package

To use the package, add the alexa-icon package to the import array in your document. The latest version of the alexa-icon package is 1.0.0.

Example of the imports section of a document:

Copied to clipboard.

{
  "import": [
    {
      "name": "alexa-icon",
      "version": "1.0.0"
    }
  ]
}

The alexa-icon package includes both the AlexaIcon responsive component and the library of icons.

For details about the alexa-icon package, see Alexa Icon Package.

AlexaIcon parameters

Name Type Default Description Widget support Version added

iconColor

Color

black

Color of the icon.

Not supported

1.0.0

iconName

String

Name of an icon in the Alexa Icon Library, such as ic_battery_low

Not supported

1.0.0

iconSize

Dimension

24

Size of the icon.

Not supported

1.0.0

iconSource

String

If the AVG icon is located somewhere else, provide URL to icon JSON

Not supported

1.0.0

iconStyle

Custom style to apply to the icon. Use this to change the icon opacity, fill colors, and stroke colors for different component states. Define the style in the styles property of the APL document. For details about defining styles, see APL Style Definition and Evaluation.

Not supported

1.0.0

lang

String

${environment.lang ? environment.lang : 'en-US' }

The lang property of AlexaIcon. Set the lang property to a BCP-47 string (e.g., en-US). By default, it uses environment lang.

Not supported

1.0.0

layoutDirection

String

${environment.layoutDirection}

The layoutDirection of AlexaIcon. It can be LTR or RTL. By default, it uses environment layoutDirection.

Not supported

1.0.0

type

String

Always set to AlexaIcon.

Not supported

1.0.0

AlexaIcon example



Was this page helpful?

Last updated: Nov 28, 2023