[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Collapse]Common Concepts
  [Expand]Web.config Modifications
  [Expand]Callback Exception Handling
  [Expand]Client-Side Functionality
  [Expand]Cookies Support
  [Expand]Appearance Customization - Theming
   Icon Collection
  [Expand]Performance Optimization
  [Expand]CSS Image Sprites
   Supported Document Types
  [Expand]Accessibility Support
   Right to Left Support
   HTML Encoding
   Binary Storage Configuration
  [Expand]SharePoint Support
   Mobile Support
  [Expand]Office Document Management
   Cloud Storage Account Management
  [Expand]Web Farm and Web Garden Support
 [Expand]ASP.NET WebForms Controls
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Icon Collection

In addition to WebForms controls and MVC extensions, DevExpress ASP.NET Subscription includes an icon collection. These icons help provide a consistent look and feel throughout different user interface elements (such as menus, toolbars, and control elements) within your web application.

Icons are provided for two element states (normal and disabled), in two dimensions (16x16 and 32x32 pixels) and in two color schemes (color and grayscale). Icons are logically grouped into several 'action' categories (such as 'Edit', 'Export', and 'Filter') - to find the appropriate icon based on task.

You can specify icons as element images in most DevExpress controls. Use the ImagePropertiesBase.IconID property inherited from an image base class (ImagePropertiesBase) to define an icon for an element image. If the IconID property is set, the specified icon is displayed for the element's normal state; the corresponding icon related to the element's disabled state will be displayed automatically when required.

Expanded Setting the IconID Property

There are several approaches to assigning icons to IconID properties. You can select an approach based on the platform (ASP.NET WebForms or ASP.NET MVC) and level of element image customization (via the Properties window at design-time, or by modifying the control markup or code-behind).

Expanded Using the design-time Icon Picker dialog (for WebForms only)

The easiest way to assign an icon is to use the design-time Icon Picker dialog, which is integrated into DevExpress WebForms controls. Click the IconID property’s dropdown button to display the Icon Picker, which allows you to access images from the gallery and assign them to specific control elements. The Item Picker includes search and filtering features to locate images.

Once an icon is selected via the Icon Picker dialog, it assigns a string identifier (which specifies the icon) to the IconID property.

Expanded By modifying the markup (for WebForms only)

If you know the identifier for the required icon, you can assign it to the IconID property directly in the markup.

Expanded Via code (for WebForms and MVC)

If you need to manipulate the IconID property programmatically - in code-behind (for ASP.NET WebForms) or in view code (for ASP.NET MVC) - you can use one of the following approaches.

  • Set the IconID property to the icon’s string identifier directly in the markup or via the Properties window.
  • Set the IconID property to a constant stored in the DevExpress.Web.ASPxThemes.IconID enumeration class (ASPxThemes assembly).

Expanded Example

The code samples below demonstrate how to use both approaches to specify icons for menu items in code.

  • ASP.NET Web Forms
  • ASP.NET MVC

    Note that you need to additionally attach a specific icon-related style sheet (identified by ExtensionSuite.Icons) to be able to assign DevExpress icons within MVC views.

The image below shows the result.

 

View the Demo

To make it easier to work with DevExpress icons and find corresponding icon constants or identifiers, see the following online demo: Icon Library Explorer. The demo includes a Grid View that lists all DevExpress icons and allows you to find required icons via sorting, grouping and filtering.

Expanded See Also

Is this topic helpful?​​​​​​​