• Special button type
• Button layout
• Sub-theme
• Button style
• Button class name
• Hover class name
• Pressed class name
• Disabled class Name
• Button text
• Show expression
• Disabled expression
• Auto-hide disclosure
• Bubble help
• Button keep pressed
• Button first button class name
• Button last button class name
• Button middle button class name
• Disabled icon
• Hover icon
• Icon
• Icon class name
• Icon style
• Pressed icon

Icon

Description

The 'Icon' property specifies the icon that will appear on a button. In order to access the Icon property you must first select an option from the 'Button layout' property that contains an 'Image'.

Clicking the button next to the Icon property opens the 'Specify Image' dialog. There are five general options for specifying an image. These are:

SVG Icon

CSS Icon

Image in Web Project or Style

Built-in Image

URL for external image

SVG Icon

Unlike regular images, which are bitmaps, SVG Icons are rendered as vectors. The advantage of SVG Icons is that they can be smoothly scaled to any size and can be rendered in any color. Some of the component styles use SVG Icons and if you are using one of these styles, then you can choose an icon from the style. You can also add your own SVG icons to a component in the 'Local SVG definitions' and 'Linked SVG files' property.

Built-in SVG icons using the 'Alpha' style.

CSS Icon

Unlike regular images, which are bitmaps, CSS Icons are rendered using a special font that is loaded by a CSS stylesheet. Some of the component styles use CSS Icons and if you are using these styles, then you can choose an icon from the style. You can also select the icon from any of the 3rd-party CSS Icon libraries that you have specified should be loaded (for example, the 'Font-Awesome' icon library).

Built-in CSS icons using the 'Alpha' style and 'font-awesome' Image source.

The Color: control in the corner of the Icon Picker opens the Color Picker. This allows you to alter the color of the icons.

Checking the 'Spin' checkbox causes icons to spin.

Image in Web Project or Style

Choosing the 'Select From Web Project Folder' option opens a dialog that allows you to add images to a project. This can be done by clicking the 'Add Image to Project' button in the lower left-hand corner of the dialog. Doing this will open a file navigator that will let you select an existing image on your computer's desktop and add it to the project.

A project image imported from the desktop.

Built-in Image

You can access Alpha Anywhere's built-in images for use in an application by selecting the Built-in Image option. There are options for using System Images, Addin Images, Windows Images, and Current Workspace Images. The Built-in Image feature is an old one and works with almost all styles. The System Images option contains the largest number of built-in icons.

Image URL

It is possible to use a URL for an external image to place an image or icon on a button. Simply place the URL in the 'Image URL' textbox.