DevExtreme React - Icons

Built-In Icon Library

DevExtreme includes an icon library with SVG and font icons for all DevExtreme themes. You can use an icon in UI components and in other page elements as is or customize it.

The following icons are available:

You can find source icons in DevExtreme's GitHub repository:

Icons in DevExtreme UI Components

You can use icons in DevExtreme components that have an icon property. The following code snippet integrates icons from the built-in icon library into a Button component.

jQuery
index.js
$(function() {
    $("#saveButton").dxButton({
        icon: "save",
    });
});
Angular
app.component.html
<dx-button
    icon="save"
></dx-button>
Vue
App.vue
<template>
    <DxButton
        icon="save"
    />
</template>
<script>
// ...
</script>
React
<!-- App.js -->
// ...
function App() {
    return (
        <Button
            icon="save"
        />
    );
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Button()
    .Icon("save")
    .Text("Save")
)

View Demo

Many default templates include the icon property. The following code snippet demonstrates the default item template of the ContextMenu component:

jQuery
index.js
$(function() {
    $("#contextMenuContainer").dxContextMenu({
        // ...
        dataSource: [
            { text: "Zoom In", icon: "plus" },
            { text: "Share", icon: "message" },
            { text: "Download", icon: "download" }
        ]
    });
});
Angular
app.component.html
<dx-context-menu ... >
    <dxi-item text="Zoom In" icon="plus"></dxi-item>
    <dxi-item text="Share" icon="message"></dxi-item>
    <dxi-item text="Download" icon="download"></dxi-item>
</dx-context-menu>
Vue
App.vue
<template>
    <DxContextMenu ... >
        <DxItem text="Zoom In" icon="plus" />
        <DxItem text="Share" icon="message" />
        <DxItem text="Download" icon="download" />
    </DxContextMenu>
</template>
<script>
// ...
</script>
React
App.js
// ...
function App() {
    return (
        <ContextMenu ... >
            <Item text="Zoom In" icon="plus" />
            <Item text="Share" icon="message" />
            <Item text="Download" icon="download" />
        </ContextMenu>
    );
}

export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().ContextMenu()
    .Items(i => {
        i.Add().Text("Zoom In").Icon("plus");
        i.Add().Text("Share").Icon("message");
        i.Add().Text("Download").Icon("download");
    })
)

To find a list of UI components that support icons, search for "icon" in the left-hand menu.

Icons in Other HTML Elements

You can add DevExtreme icons to non-DevExtreme HTML elements. To do this, assign the dx-icon-IconName class to an element. We recommend using inline HTML elements such as <i> or <span>.

HTML
<i class="dx-icon-email"></i>

You can find icon names in the Built-In Icon Library article.

Customize Icons

DevExtreme icons are implemented as an icon font. You can customize icons with CSS styles specific to text content such as color, font-size, font-weight, and text-align.

DevExtreme UI components that generate icons assign the dx-icon class to all generated icons. Assign a unique id to a DevExtreme component and use it alongside the .dx-icon selector to customize all generated icons in a component simultaneously. To customize a specific generated icon, use a CSS selector with a specific icon class, such as .dx-icon-refresh. The following code snippet customizes both a specific icon and all generated icons in a Toolbar component:

jQuery
index.js
index.css
$(function() {
    $("#toolbar").dxToolbar({
        items: [{
            widget: 'dxButton',
            options: {
                icon: 'back',
            },
        }, {
            widget: 'dxButton',
            options: {
                icon: 'refresh',
            },
        }]
    });
});
#toolbar .dx-icon {
    color: red; /* Customizes all generated icons within #toolbar. */
}

#toolbar .dx-icon-refresh {
    color: red; /* Customizes all "refresh" icons within #toolbar. */
}
Angular
app.component.html
app.component.css
<dx-toolbar id="toolbar">
    <dxi-item
        widget="dxButton"
        [options]="{icon: 'back'}"
    ></dxi-item>
    <dxi-item
        widget="dxButton"
        [options]="{icon: 'refresh'}"
    ></dxi-item>
</dx-toolbar>
::ng-deep #toolbar .dx-icon {
    color: red; /* Customizes all generated icons within #toolbar. */
}

::ng-deep #toolbar .dx-icon-refresh {
    color: red; /* Customizes all "refresh" icons within #toolbar. */
}
Vue
App.vue
<template>
    <DxToolbar id="toolbar">
        <DxItem
            widget="dxButton"
            :options="backButtonOptions"
        />
        <DxItem
            widget="dxButton"
            :options="refreshButtonOptions"
        />
    </DxToolbar>
</template>
<script>
    // ...
    const backButtonOptions = { icon: 'back' }
    const refreshButtonOptions = { icon: 'refresh' }
</script>
<style scoped>
    #toolbar .dx-icon {
        color: red; /* Customizes all generated icons within #toolbar. */
    }

    #toolbar .dx-icon-refresh {
        color: red; /* Customizes all "refresh" icons within #toolbar. */
    }
</style>
React
App.js
App.css
// ...
function App() {
    const backButtonOptions = { icon: 'back' }
    const refreshButtonOptions = { icon: 'refresh' }

    return (
        <Toolbar id="toolbar">
            <Item
                widget="dxButton"
                options={backButtonOptions}
            />
            <Item
                widget="dxButton"
                options={refreshButtonOptions}
            />
        </Toolbar>
    );
}

export default App;
#toolbar .dx-icon {
    color: red; /* Customizes all generated icons within #toolbar. */
}

#toolbar .dx-icon-refresh {
    color: red; /* Customizes all "refresh" icons within #toolbar. */
}
ASP.NET MVC Controls
Razor C#
CSS
@(Html.DevExtreme().Button()
    .ID("saveButton")
    .Icon("save")
    .Text("Save")
)
#saveButton .dx-icon {
    font-size: 24px;
    color: blue;
}

To customize icons added to HTML elements, define a specific CSS class and assign styles to it.

HTML
CSS
<i class="dx-icon-email custom-icon-style"></i>
.custom-icon-style {
    font-size: 24px;
    color: blue;
}

Custom Images as Icons

Assign an image URL to the icon property of a DevExtreme UI component to implement a custom icon. You can also encode images in Base64 format to avoid additional HTTP requests at the cost of increased file sizes in your project.

You can assign Base64 code directly to a component's icon property or integrate it into a CSS style. We recommend the latter approach because of the Base64 string length.

The following code snippet demonstrates how you can specify Base64 images in CSS. Replace "customicon" in the .dx-icon-customicon selector with the value you assign to component icon properties:

jQuery
CSS
.dx-icon-customicon {
    background-image: url(data:image/png;base64,... LONG BASE64 CODE IS HERE ...);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
Angular
CSS
::ng-deep .dx-icon-customicon {
    background-image: url(data:image/png;base64,... LONG BASE64 CODE IS HERE ...);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
Vue
CSS
.dx-icon-customicon {
    background-image: url(data:image/png;base64,... LONG BASE64 CODE IS HERE ...);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
React
CSS
.dx-icon-customicon {
    background-image: url(data:image/png;base64,... LONG BASE64 CODE IS HERE ...);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

You can define specific icons for different UI component states. The following code snippet specifies a unique icon for selected tabs:

CSS
.dx-tab-selected .dx-icon-customicon {
    background-image: url(data:image/png;base64,... LONG BASE64 CODE GOES HERE ...);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
NOTE
Classes like dx-tab-selected are not documented. Inspect CSS rules to determine which selectors you need to use.

External Icon Libraries

DevExtreme UI components generate icons as HTML <i> elements with icon class assignments. The following code snippet demonstrates how an icon appears in the DOM:

HTML
<i class="dx-icon dx-icon-home"></i>

DevExtreme UI components support external icon libraries that populate the DOM in the same way. Examples of such libraries include the following:

Follow the installation instructions of the library you want to integrate and set DevExtreme component icon properties as follows:

jQuery
index.js
$(function() {
    $("#fa5Button").dxButton({icon: "fas fa-home"}); // Font Awesome 5
    $("#fa4Button").dxButton({icon: "fa fa-home"}); // Font Awesome 4
    $("#glyphiconButton").dxButton({icon: "glyphicon glyphicon-home"}); // Glyphicons
    $("#ioniconsButton").dxButton({icon: "icon ion-md-home"}); // Ionicons
    $("#fabricFluentUIButton").dxButton({icon: "ms-Icon ms-Icon--Home"}); // Fabric/Fluent UI
});
Angular
app.component.html
<dx-button icon="fas fa-home"></dx-button> <!-- Font Awesome 5 -->
<dx-button icon="fa fa-home"></dx-button> <!-- Font Awesome 4 -->
<dx-button icon="glyphicon glyphicon-home"></dx-button> <!-- Glyphicons -->
<dx-button icon="icon ion-md-home"></dx-button> <!-- Ionicons -->
<dx-button icon="ms-Icon ms-Icon--Home"></dx-button> <!-- Fabric/Fluent UI -->
Vue
App.vue
<template>
    <DxButton icon="fas fa-home" /> <!-- Font Awesome 5 -->
    <DxButton icon="fa fa-home" /> <!-- Font Awesome 4 -->
    <DxButton icon="glyphicon glyphicon-home" /> <!-- Glyphicons -->
    <DxButton icon="icon ion-md-home" /> <!-- Ionicons -->
    <DxButton icon="ms-Icon ms-Icon--Home" /> <!-- Fabric/Fluent UI -->
</template>
<script>
// ...
</script>
React
App.js
function App() {
    return (
        <Button icon="fas fa-home" /> // Font Awesome 5
        <Button icon="fa fa-home" /> // Font Awesome 4
        <Button icon="glyphicon glyphicon-home" /> // Glyphicons
        <Button icon="icon ion-md-home" /> // Ionicons
        <Button icon="ms-Icon ms-Icon--Home" /> // Fabric/Fluent UI
    );
}
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Button()
    .Icon("fas fa-home") // Font Awesome 5
    .Icon("fa fa-home") // Font Awesome 4
    .Icon("glyphicon glyphicon-home") // Glyphicons
    .Icon("icon ion-md-home") // Ionicons
    .Icon("ms-Icon ms-Icon--Home") // Fabric/Fluent UI
)

SVG Icons

In addition to font icons, DevExtreme supplies the same icons in the SVG format. You can find SVG icons in the DevExtreme repository on GitHub.

The following code uses SVG icons in the Button UI component. The same technique can be used with any other UI component that has the icon property.

  1. Use the icon's URL:

    JavaScript
    new DevExpress.ui.dxButton(targetElement, {
    icon: "https://path/to/the/icon.svg"
});

    This code wraps the SVG icon inside a <img /> tag. In this case, you cannot use CSS rules to customize the SVG image.

  2. Insert SVG content inline:

    JavaScript
    new DevExpress.ui.dxButton(targetElement, {
    icon: "<svg>SVG_CONTENT</svg>"
});

    This code renders SVG content directly in the markup. In this case, you can use CSS rules to customize the SVG image.

  3. Import the icon:

    JavaScript
    import * as myIcon from "./assets/icon.svg";
new DevExpress.ui.dxButton(targetElement, {
    icon: myIcon
});

    This code wraps the SVG icon inside a <img /> tag. In this case, you cannot use CSS rules to customize the SVG image.

IMPORTANT
The SVG format can contain executable code that might be malicious. We recommend that you use SVG icons from trusted sources only.