ExtJS 7 CE Material主题下MessageBox无法显示图标求助

问题原因 #

Material主题对MessageBox的默认样式做了调整，原生icon配置无法直接渲染出图标，需要通过额外配置或自定义样式来解决。

解决方案1：自定义CSS类添加图标 #

给MessageBox指定自定义类，再通过CSS设置图标样式：

Ext.Msg.show({
    title: 'My Title',
    message: 'My Message',
    width: 340,
    cls: 'msg-info-icon',
    buttons: Ext.MessageBox.OK
});

对应的CSS代码：

.msg-info-icon .x-message-box-icon {
    background-image: url('你的信息图标路径');
    background-size: cover;
    width: 48px;
    height: 48px;
    display: block;
}

解决方案2：嵌入Font Awesome图标 #

利用Material主题默认集成的Font Awesome，直接在消息内容里插入图标：

Ext.Msg.show({
    title: 'My Title',
    message: '<span class="x-fa fa-info-circle" style="font-size:48px; margin-right:15px; vertical-align:middle;"></span>My Message',
    width: 340,
    buttons: Ext.MessageBox.OK,
    html: true
});

解决方案3：全局修改主题配置 #

如果需要所有MessageBox都显示图标，可修改主题变量后重新编译：
在主题的sass/var/MessageBox.scss文件中添加：

$message-box-icon-display: block;

注意事项 #

• 使用html: true时需确保消息内容可信，避免XSS风险；
• Font Awesome图标类可根据需要替换，比如fa-warning对应警告图标、fa-question-circle对应疑问图标。

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