Integrate image with text using TextMeshPro

I always wondered how people integrated images along with text in their UI which can be seen in most of the tutorials. The way I did before was writing the text and dragging the image near it to make it look like it was integrated along with it. The problem with it was that the anchor for text and image didn't always fit properly making images appear at different locations as compared to text in different resolution screens. And then I came across textmeshpro a really cool text for unity that supports multiple features unsupported by the default text system from unity.

Steps required:
1) You need to have an image that you want to integrate with text. I made simple xbox button icons to show you how it was done.
2) Convert your imported image sprite mode to multiple. Note, this texture must have multiple sprites that can be sliced so that we can use a single atlas to show different images.

3) Slice Images by opening sprite editor.

4 ) You need to create a sprite asset for textmeshpro use. For doing that you need to first select the image you want to create a sprite asset from. A visual image showing how you can do that is shown here.

5) Now create textmeshpro text in canvas. Expand extra settings. There you will find a location where you can put newly created sprite assets.

6) after setting these up we can simply write any text we want and when we want to add an image we simply use
the index of sprite in our sprite atlas. All the images sliced are indexed while creating the sprite asset. A simple example of how we can use an image is:

Press <size=60> <sprite=0> </size> to jump //

here 0 is the index of the sprite and for increasing image size I am using a size tag. In the example below I have used all the sprite indices to show different images.

Using these steps you will be able to integrate images easily using text mesh pro. In the example above I am using different tags like size, sprite which are rich text supported by textmeshpro. For understanding different tags supported by textmeshpro please refer to TextMeshPro's official documentation.

That's it I hope you learned something new. Please leave any comments you have about this article.