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.
Button option screen
Button option screen
  1. Select Interactivity and enable the Icon toggle switch.
Icon toggle switch
Icon toggle switch
  1. Under the Material UI option, use the Search field, if necessary, and select an icon to select it.
Material UI icons
Material UI icons
  1. As an alternative, select the Ionicons option.
  2. Use the drop-down list to select an option:
    • Filled
    • Outline
    • Sharp
Ionicons (edited image as example)
Ionicons (edited image as example)
  1. As an alternative, select the Custom option.
  2. Add the CSS code to the field.
SVG code
SVG code
  1. 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.

Hidden Title

Need more help?