angular primeng p-confirmdialog - 如何用谷歌素材图标替换对话框面板的关闭图标

Posted 2023-02-22

【中文标题】angular primeng p-confirmdialog - 如何用谷歌素材图标替换对话框面板的关闭图标

【英文标题】：angular primeng p-confirmdialog - how to replace close icon of dialog panel with google material icon

【发布时间】：2021-10-15 20:59:24

【问题描述】：

我正在处理需要将对话框面板的关闭图标替换为谷歌材料图标的要求。

找到下面的截图，我想用谷歌素材图标替换关闭图标。

dialog box screenshot

以下代码生成带有一些自定义消息的对话框。

confirm(data, dt): boolean 
    let confirmation = false;
    let message
    if (data.SelfOwner == true) 
      message = 'Delete this Dashboard?'
    
    this.confirmationService.confirm(
      message: message,
      header: 'Confirm delete'
)

添加谷歌素材图标的示例如下。

<span class="material-icons">
delete
</span>

但对话框会自动使用默认的 css 和 html 组件呈现。

generated code for dialog box

谁能指导我如何用谷歌素材图标覆盖对话框的关闭图标。

提前致谢。

【问题讨论】：

那么你卡在哪里了？分享一些关闭图标相关的组件代码

@sid 我已经更新了问题。

【参考方案1】：

使用 p-dialog-titlebar-close css 类更新关闭图标元素。

也许您必须在 style.scss 文件中进行更改。