Icon Collection

• Sep 30, 2023
• 2 minutes to read

The DevExpress ASP.NET Subscription includes a collection of icons that you can use as an element’s image in most DevExpress controls.

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 IconID property to define an icon for an element’s image. If the IconID property is set, the element displays the specified icon in a normal state. When the element is disabled, it displays the corresponding disabled icon.

Run Demo: Icon Library Explorer

Attach the ExtensionSuite.Icons extension to your project to use DevExpress icon library.

To specify an element’s icon, set the IconID property to the icon’s string identifier or to a constant stored in the DevExpress.Web.ASPxThemes.IconID enumeration class.

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

_Layout.cshtml

@Html.DevExpress().GetStyleSheets(
    new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Icons })  //Required to use DevExpress icons

View.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()