Adding images to a Dropdown control

There are two pairs of items Unity uses to manage how Text and Images are displayed:

• The Caption Text and Image GameObjects are used to control how the currently-selected item for the Dropdown is displayed – the part of the Dropdown we always see, whether the Dropdown is being interacted with or not.
• The Item Text and Image GameObjects are part of the Template GameObject, and they define how each option is displayed as a row when the Dropdown menu items are being displayed – the rows displayed when the user is actively working with the Dropdown GameObject.

So we have to add an Image in two places (Caption and Template Item), in order to get a Dropdown working fully with image icons for each option.

To add a Sprite image with each Text item in the Dropdown, do the following:

1. Import the provided Images folder.
2. In the Inspector, for the Dropdown (Script) component, for each item in the list of Options Hearts, Clubs, Diamonds, and Spades, drag the associated Sprite image from the card_suits folder in the Project panel (hearts.png for Hearts, and so on).
3. Add a UI Image in the Project panel, and child this Image to the Dropdown GameObject.
4. Drag the hearts.png Image from the Project panel into the Source Image property of the Image (Script) for the Image GameObject. Size this Image to 25 x 25 in the Rect Transform, and drag it over the letter "H" in "Hearts" in the Label GameObject.
5. Move the Label GameObject to the right of the hearts image.
6. With Dropdown Selected in the Project panel, drag the Image GameObject into the Caption Image property of the Dropdown (Script) component.
7. Enable the Template GameObject (usually it is disabled).

8. Duplicate the Image GameObject child of Dropdown, and name the copy Item Image. Child this Image in between the Item Background and Item Checkmark GameObjects that are in Dropdown-Template-Content-Item (the Item Image needs to appear below the white Item Background Image, otherwise it will be covered by the background and not be visible).
9. Since items in the Dropdown are slightly smaller, resize Item Image to be 20 x 20 in its Rect Transform.
10. Position Item Image over the "O" of "Option A" of Item Text, and then move Item Text to the right so that the icon and text are not on top of each other.
11. With Dropdown Selected in the Project panel, drag the Item Image GameObject into the Item Image property of the Dropdown (Script) component:

12. Disable the Template GameObject, then run the scene to see your Dropdown with icon images for each menu option.