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

Icons can be used in those UI components that have an icon property. For instance, the Button UI component has this property on the first level of the configuration object. Icons in the following code samples are taken from the built-in icon library.

jQuery

JavaScript

$(function() {
    $("#saveButton").dxButton({
        icon: "save",
        text: "Save"
    });
});

Angular

HTML

TypeScript

<dx-button
    icon="save"
    text="Save">
</dx-button>

import { DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxButtonModule
    ],
    // ...
})

Vue

<template>
    <DxButton
        icon="save"
        text="Save" />
</template>
<script>
import DxButton from 'devextreme-vue/button';

export default {
    components: {
        DxButton
    }
}
</script>

React

import React from 'react';
import { Button } from 'devextreme-react/button';

class App extends React.Component {
    render() {
        return (
            <Button
                icon="save"
                text="Save"
            />
        );
    }
}

export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().Button()
    .Icon("save")
    .Text("Save")
)

View Demo

Many default templates provide the icon property as well, the ContextMenu UI component's default item template being an example:

jQuery

JavaScript

$(function() {
    $("#contextMenuContainer").dxContextMenu({
        // ...
        dataSource: [
            { text: "Zoom In", icon: "plus" },
            { text: "Share", icon: "message" },
            { text: "Download", icon: "download" }
        ]
    });
});

Angular

HTML

TypeScript

<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>

import { DxContextMenuModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxContextMenuModule
    ],
    // ...
})

Vue

<template>
    <DxContextMenu ... >
        <DxItem text="Zoom In" icon="plus" />
        <DxItem text="Share" icon="message" />
        <DxItem text="Download" icon="download" />
    </DxContextMenu>
</template>
<script>
import { DxContextMenu, DxItem } from 'devextreme-vue/context-menu';

export default {
    components: {
        DxContextMenu,
        DxItem
    }
}
</script>

React

import React from 'react';
import { ContextMenu, Item } from 'devextreme-react/context-menu';

class App extends React.Component {
    render() {
        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

If an HTML element should display a DevExtreme icon, add a dx-icon-IconName class to it. We recommend using inline HTML elements (<i> or <span>).

HTML

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

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

Customize Icons

Since DevExtreme icons are shipped as an icon font, they can be customized with the same CSS properties that you would use to customize textual content: color, font-size, font-weight, text-align, etc. This is true for icons used in UI components...

jQuery

HTML

JavaScript

CSS

<div id="saveButton"></div>

$(function() {
    $("#saveButton").dxButton({
        icon: "save",
        text: "Save"
    });
});

#saveButton .dx-icon {
    font-size: 24px;
    color: blue;
}

Angular

HTML

TypeScript

CSS

<dx-button
    id="saveButton" 
    icon="save"
    text="Save">
</dx-button>

import { DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxButtonModule
    ],
    // ...
})

::ng-deep #saveButton .dx-icon {
    font-size: 24px;
    color: blue;
}

Vue

<template>
    <DxButton
        id="saveButton"
        icon="save"
        text="Save" />
</template>
<script>
import DxButton from 'devextreme-vue/button';

export default {
    components: {
        DxButton
    }
}
</script>
<style>
#saveButton .dx-icon {
    font-size: 24px;
    color: blue;
}
</style>

React

JavaScript

CSS

import React from 'react';
import { Button } from 'devextreme-react/button';

class App extends React.Component {
    render() {
        return (
            <Button
                id="saveButton"
                icon="save"
                text="Save"
            />
        );
    }
}

export default App;

#saveButton .dx-icon {
    font-size: 24px;
    color: blue;
}

ASP.NET MVC Controls

Razor C#

CSS

@(Html.DevExtreme().Button()
    .ID("saveButton")
    .Icon("save")
    .Text("Save")
)

#saveButton .dx-icon {
    font-size: 24px;
    color: blue;
}

... and for icons used in any other HTML elements:

HTML

CSS

<i class="dx-icon-email dx-icon-custom-style"></i>

.dx-icon-custom-style {
    font-size: 24px;
    color: blue;
}

dx-icon is a CSS class added to icon elements when DevExtreme UI components render them into the DOM. You cannot use another name for it. However, it is not true for icons in other HTML elements. You can use any name for the class in this case, as demonstrated in the previous example.

Custom Images as Icons

The UI component's icon property accepts URLs, so you can assign the image's URL to it. However, it is better to encode the image in the Base64 type instead to reduce the amount of transferred data. Search for an image to Base64 converter on the web.

Although Base64 code can be assigned directly to the icon property, we recommend placing it in the CSS because of its length. Add the following CSS rule to your stylesheet:

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;
}

customicon here is the icon's name that you should assign to the UI component's icon property.

In addition, you can provide a specific icon variant for different states of a UI component element. In the following code, a special icon is provided 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;
}

Classes like dx-tab-selected from the previous example are not documented. Inspect CSS rules to find out which classes are added to the UI component element you are customizing.

External Icon Libraries

Icons in UI components are inserted into the DOM as <i> elements. When you set a UI component's icon property, its value is used to form the class attribute of the <i> element. For instance, the code below ...

icon: "home"

... renders into the DOM as follows:

HTML

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

This allows DevExtreme UI components to support icons from external icon libraries, provided that they too should be specified in the class attribute.

Font Awesome, Glyphicons, Ionicons, and Fabric/Fluent UI are examples of such libraries. Follow the installation tutorial for the library you want to use and set the icon property as follows:

jQuery

JavaScript

$(function() {
    $("#homeButton").dxButton({
        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
    });
});

Angular

HTML

<dx-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 -->
</dx-button>

Vue

<template>
    <DxButton ... 
        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 -->
</template>
<script>
import DxButton from 'devextreme-vue/button';

export default {
    components: {
        DxButton
    }
}
</script>

React

import React from 'react';
import { Button } from 'devextreme-react/button';

class App extends React.Component {
    render() {
        return (
            <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
            />
        );
    }
}

export default App;

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.

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.
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.

Import the icon:

JavaScript

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

IMPORTANT

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

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

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery/JS - Icons

Built-In Icon Library

Icons in DevExtreme UI Components

jQuery

Angular

Vue

React

ASP.NET MVC Controls

jQuery

Angular

Vue

React

ASP.NET MVC Controls

Icons in Other HTML Elements

Customize Icons

jQuery

Angular

Vue

React

ASP.NET MVC Controls

Custom Images as Icons

jQuery

Angular

Vue

React

External Icon Libraries

jQuery

Angular

Vue

React

ASP.NET MVC Controls

SVG Icons