Icon Collection

• Jul 09, 2021
• 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 components. 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 View Example: How to use the DevExpress Icon Collection

Set the IconID Property

To change the IconID property (in view code), use one of the following approaches.

• Set the IconID property to the icon’s string identifier.
• Set the IconID property to a constant stored in the DevExpress.Web.ASPxThemes.IconID enumeration class (see ASPxThemes assembly).

Note that you also need to attach a specific icon-related style sheet (identified by ExtensionSuite.Icons) to allow DevExpress icon assignment within an MVC view.

Example

The code example below uses both approaches to specify icons for menu items in code.

# [_Layout.cshtml](#tab/tabid-cshtml)

```cshtml
@Html.DevExpress().GetStyleSheets(
        new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Icons })  //This line is required to use DevExpress icons
```

***


# [View.cshtml](#tab/tabid-cshtml)

```cshtml
@Html.DevExpress().Menu(settings => {
    settings.Name = "myMenu";

    settings.Items.Add(item => {
        item.Text = "Home";
        item.Image.IconID = "navigation_home_16x16";
    });
    settings.Items.Add(item => {
        item.Text = "Profile";
        item.Image.IconID = "people_customer_16x16";
    });
    settings.Items.Add(item => {
        item.Text = "Clients";
        item.Image.IconID = DevExpress.Web.ASPxThemes.IconID.PeopleUsergroup16x16;
    });
    settings.Items.Add(item => {
        item.Text = "Reports";
        item.Image.IconID = DevExpress.Web.ASPxThemes.IconID.ProgrammingShowtestreport16x16;
    });
}).GetHtml()
```

***

The image below shows the result.