Icon Collection

• Sep 29, 2023
• 2 minutes to read

In addition to Web Forms controls and MVC extensions, the DevExpress ASP.NET Subscription includes an icon collection. These icons provide a consistent look and feel across user interface elements (e.g., 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 multiple ‘action’ categories (e.g., ‘Edit’, ‘Export’, and ‘Filter’) - to locate an appropriate icon based on task.

You can specify an icon as an element image in most DevExpress controls. Use the ImagePropertiesBase.IconID property 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; a corresponding icon related to the element’s disabled state is automatically displayed when required.

Run Demo: Icon Library Explorer

Set the IconID Property

Use the Design-time Icon Picker Dialog

The easiest way to assign an icon is to use the Icon Picker dialog at design time, which is integrated into DevExpress Web Forms controls. Click the IconID property’s dropdown button to display the Icon Picker. The Icon Picker allows you to select images from a gallery and assign them to specific control elements. This dialog 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.

In Markup

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

ASPX

<dx:ASPxButton ID="ASPxButton1" CssClass="button" runat="server">  
    <Image IconID="navigation_home_32x32">  
    </Image>  
</dx:ASPxButton>

In Code

To change the IconID property programmatically - in code-behind (for ASP.NET Web Forms) - use one of the following approaches.

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

Example

The code examples below use both approaches to specify icons for menu items in code.

• ASP.NET Web Forms

  C#

  DevExpress.Web.ASPxMenu myMenu = new DevExpress.Web.ASPxMenu();
      myMenu.Items.Add("Home").Image.IconID = "navigation_home_16x16";
      myMenu.Items.Add("Profile").Image.IconID = "people_customer_16x16";
      myMenu.Items.Add("Clients").Image.IconID = DevExpress.Web.ASPxThemes.IconID.PeopleUsergroup16x16;
      myMenu.Items.Add("Reports").Image.IconID = DevExpress.Web.ASPxThemes.IconID.ProgrammingShowtestreport16x16;
  

  VB.NET

  Dim myMenu As New DevExpress.Web.ASPxMenu()
      myMenu.Items.Add("Home").Image.IconID = "navigation_home_16x16"
      myMenu.Items.Add("Profile").Image.IconID = "people_customer_16x16"
      myMenu.Items.Add("Clients").Image.IconID = DevExpress.Web.ASPxThemes.IconID.PeopleUsergroup16x16
      myMenu.Items.Add("Reports").Image.IconID = DevExpress.Web.ASPxThemes.IconID.ProgrammingShowtestreport16x16
  

The image below shows the result.