Icon

This component renders an icon for decorating the adjacent text. It can be used only in a baseline box.

Request {#icon-request-parameter}

ParameterTypeRequiredDescription
typestringYSet this parameter to icon.
urlstringYImage URL (PNG format recommended, HTTPS only)

Maximum size: 1 MB
Maximum length: 1,000 characters
marginstringNThe minimum space between the component and the previous component in the parent component. For more information, see margin.
positionstringNThe reference point for the offsetTop, offsetBottom, offsetStart, and offsetEnd properties. Specify one of the following values:

• relative: Uses the previous box as the reference point.
• absolute: Uses the upper left corner of the parent component as the reference point.

The default value is relative. For more information, see Offset.
offsetTopstringNTop offset For more information, see Offset.
offsetBottomstringNBottom offset For more information, see Offset.
offsetStartstringNLeft offset. For more information, see Offset.
offsetEndstringNRight offset. For more information, see Offset.
sizestringNMaximum width of the icon.
Specify one of the following values: xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, and 5xl.
The icon width increases in the order the values are listed.

The default value is md.
aspectRatiostringNAspect ratio. Enter a value in {width}:{height} format.
Specify the {width} and {height} values between 1 and 10,000.
Note that the {height} cannot exceed three times the {width}.

The default value is 1:1.

※ The flex property of the icon component must be set to 0.

Request example {#icon-request-example}

{  "type": "bubble",  "body": {    "type": "box",    "layout": "vertical",    "contents": [      {        "type": "box",        "layout": "baseline",        "contents": [          {            "type": "icon",            "url": "https://developers.worksmobile.com/image/en/bot/message_type/icon.png",            "size": "md"          },          {            "type": "text",            "text": "How may I help you?",            "size": "md",            "margin": "sm"          }        ]      },      {        "type": "box",        "layout": "baseline",        "contents": [          {            "type": "icon",            "url": "https://developers.worksmobile.com/image/en/bot/message_type/icon.png",            "size": "lg"          },          {            "type": "text",            "text": "How may I help you?",            "size": "lg",            "margin": "sm"          }        ]      },      {        "type": "box",        "layout": "baseline",        "contents": [          {            "type": "icon",            "url": "https://developers.worksmobile.com/image/en/bot/message_type/icon.png",            "size": "xl"          },          {            "type": "text",            "text": "How may I help you?",            "size": "xl",            "margin": "sm"          }        ]      },      {        "type": "box",        "layout": "baseline",        "contents": [          {            "type": "icon",            "url": "https://developers.worksmobile.com/image/en/bot/message_type/icon.png",            "size": "xxl"          },          {            "type": "text",            "text": "How may I help you?",            "size": "xxl",            "margin": "sm"          }        ]      },      {        "type": "box",        "layout": "baseline",        "contents": [          {            "type": "icon",            "url": "https://developers.worksmobile.com/image/en/bot/message_type/icon.png",            "size": "3xl"          },          {            "type": "text",            "text": "How may I help you?",            "size": "3xl",            "margin": "sm"          }        ]      }    ]  }}