DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

在本文中，我們將為大家介紹如何使用DevExtreme組件內置的圖標庫類型，歡迎下載最新版組件體驗！

DevExtreme v22.1正式版下載

DevExpress技術交流群6：600715373      歡迎一起進群討論

內置圖標庫

DevExtreme為所有DevExtreme主題提供了一個帶有SVG和字體圖標的圖標庫，開發人員可以在UI組件和其他頁面元素中使用圖標，也可以自定義它。

可用的圖標如下：

DevExtreme UI組件中的圖標

圖標可以在那些具有圖標屬性的UI組件中使用，例如Button UI組件在配置對象的第一層具有此屬性，下面代碼示例中的圖標取自內置圖標庫。

jQuery

JavaScript

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

ASP.NET MVC Controls

Razor C#

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

許多默認模板也提供圖標屬性，ContextMenu UI組件的默認項模板就是一個例子：

jQuery

JavaScript

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

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

要查找支持圖標的UI組件列表，請在左側菜單中搜索“icon”。

其他HTML元素中的圖標

如果HTML元素應該顯示DevExtreme圖標，請向其添加一個dx-icon-IconName類，建議使用內聯HTML元素(<i>或<span>)。

HTML

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