Icon

The Icon widget represents either a built-in icon or custom icon. You can use Icon in card messages and dialogs in the following ways:

  • Display a standalone icon.
  • Display an icon in front of related text, as part of a DecoratedText widget.
  • Display an icon as an interactive button, as part of a ButtonList widget.

The following is a card consisting of an Icon component:

Available built-in icons for the Icon widget

To use a built-in icon, you use the knownIcon field:

{
  .
  .
  .
      "knownIcon": "TRAIN",
  .
  .
  .
}

The following table lists the built-in icons that are available for card messages:

AIRPLANE BOOKMARK
BUS CAR
CLOCK CONFIRMATION_NUMBER_ICON
DESCRIPTION DOLLAR
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
INVITE MAP_PIN
MEMBERSHIP MULTIPLE_PEOPLE
PERSON PHONE
RESTAURANT_ICON SHOPPING_CART
STAR STORE
TICKET TRAIN
VIDEO_CAMERA VIDEO_PLAY

JSON representation and fields

JSON representation 
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string
  // End of list of possible types for union field icons.
}
Fields
altText

string

Optional. A description of the icon used for accessibility. If unspecified, the default value Button is provided. As a best practice, you should set a helpful description for what the icon displays, and if applicable, what it does. For example, A user's account portrait, or Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat.

If the icon is set in a Button, the altText appears as helper text when the user hovers over the button. However, if the button also sets text, the icon's altText is ignored.

imageType

enum (ImageType)

The crop style applied to the image. In some cases, applying a CIRCLE crop causes the image to be drawn larger than a built-in icon.

Union field icons. The icon displayed in the widget on the card. icons can be only one of the following:
knownIcon

string

Display one of the built-in icons provided by Google Workspace.

For example, to display an airplane icon, specify AIRPLANE. For a bus, specify BUS.

For a full list of supported icons, see built-in icons.

iconUrl

string

Display a custom icon hosted at an HTTPS URL.

For example: 

"iconUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png"

Supported file types include .png and .jpg.

ImageType

The shape used to crop the image.

Enums
SQUARE Default value. Applies a square mask to the image. For example, a 4x3 image becomes 3x3.
CIRCLE Applies a circular mask to the image. For example, a 4x3 image becomes a circle with a diameter of 3.

Troubleshoot

When a Google Chat app or card returns an error, the Chat interface surfaces a message saying "Something went wrong." or "Unable to process your request." Sometimes the Chat UI doesn't display any error message, but the Chat app or card produces an unexpected result; for example, a card message might not appear.

Although an error message might not display in the Chat UI, descriptive error messages and log data are available to help you fix errors when error logging for Chat apps is turned on. For help viewing, debugging, and fixing errors, see Troubleshoot and fix Google Chat errors.