如何为DevExpress DxButton添加Material Symbols/图标

问题描述 #

DevExpress官方文档未提及如何为DevExtreme DxButton添加Material Symbol或图标，尝试通过icon属性直接指定Material Symbols类名时图标无法正常显示：

<dx-button 
 icon="material-symbols-outlined emoji_emotions">
</dx-button>

仅DevExtreme自带图标及Font Awesome等第三方库图标可通过icon属性生效，Material Icons和Material Symbols均无法通过该方式实现。

解决方法 #

由于DxButton的icon属性仅支持预集成的图标库，Material Symbols需要通过自定义模板实现：

1. 引入Material Symbols样式
   确保项目中已引入Material Symbols的CSS（以CDN为例）：

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

2. 使用自定义模板渲染图标
   放弃icon属性，改用DxButton的template插槽自定义按钮内容，直接插入Material Symbols的元素：

<dx-button>
    <template #default>
        <span class="material-symbols-outlined">emoji_emotions</span>
        <span>按钮文本</span>
    </template>
</dx-button>

3. 可选：调整图标样式
   如果需要优化图标与文本的排版，添加自定义CSS：

.dx-button .material-symbols-outlined {
    margin-right: 8px;
    vertical-align: middle;
}

原理说明 #

DxButton的icon属性会自动生成对应预配置图标库的DOM结构，但Material Symbols的类名规则与DevExtreme默认支持的库不一致，无法被icon属性的解析逻辑识别，因此必须通过手动插入图标元素的方式实现。

内容的提问来源于stack exchange，提问作者Jorge Valvert