Add an Icon to a Button

Business Background

Add an icon to a button to customize your content with Titan, in just a few clicks.

Titan Solution

• Using Titan, you can add an icon to a button, and style this icon as desired.
• Titan enables you to customize the look and feel of your button to suit your business needs.

How to Video

• 0:01 A quick introduction on how to add an icon to a button.
• 0:04 Learn the difference between an icon and a button.
• 0:17 Watch how you navigate to button settings, to enable the icon.
• 0:40 Check out how many options of icons you have.
• 1:06 Select the icon you wish to use.
• 1:12 Watch and see how the icon appears on the page.
• 1:16 We show you how to change the name and style of the icon.
• 1:33 See how to style the color, and increase the height and width of the icon.
• 2:09 Positioning of the icon before and after the text.
• 2:22 And that is all there is to it.

How to Guide

1. Navigate to Titan Web Application.
2. Click the expand (+) button next to the settings icon. A list of elements will show.
3. Select the Button option from the list.
4. Drag and drop the Button element to the canvas.
5. Click the Button Gear icon. The Button settings screen opens.

6. Select Interactivity and enable the Icon toggle switch.

6. Under the Material UI option, use the Search field, if necessary, and select an icon to select it.

7. As an alternative, select the Ionicons option.
8. Use the drop-down list to select an option:
   • Filled
   • Outline
   • Sharp

9. As an alternative, select the Custom option.
10. Add the CSS code to the field.

11. Select the Apply button. The icon is added to the button.

You can clear the custom icon by selecting the Clear Icon button on the Select icon screen.