如何修改Quasar Notify通知组件内置图标的颜色？

方案1：使用官方原生配置（推荐，适用于Quasar v2.7.0及以上版本） #

Quasar Notify 原生提供iconColor配置项，专门用于修改内置图标的颜色，支持Quasar内置色值（如positive、negative）、十六进制色值、rgb色值等，直接封装在你的服务代码里即可，无需调用侧做任何额外处理：

static notify(text: string) {
  Notify.create({
    message: text,
    icon: 'check_circle',
    iconColor: 'positive', // 可替换为任意合法色值，如 '#21ba45'
    position: 'top-right'
  });
}

方案2：兼容低版本Quasar的实现方式 #

如果你的Quasar版本低于v2.7.0不支持iconColor，可以通过html配置拼接原生图标代码实现。之前<q-icon>无法渲染是因为Notify的message内容仅作为原生HTML插入，不会经过Vue模板编译，因此直接用图标库的原生写法即可：

static notify(text: string) {
  Notify.create({
    // 颜色、边距都可以直接写在行内样式里，完全封装在服务内部
    message: `<span class="material-icons" style="color: #21ba45; margin-right: 8px; vertical-align: middle;">check_circle</span>
              <span style="vertical-align: middle;">${text}</span>`,
    html: true,
    position: 'top-right'
  });
}

如果使用其他图标库（如Font Awesome），只需替换span标签的类名和对应图标名即可。

方案3：通过自定义全局样式统一管理 #

如果需要批量调整同类型通知的样式，也可以给Notify配置自定义类名，对应的样式写在全局样式文件中，调用侧完全无感知：
服务代码：

static notify(text: string) {
  Notify.create({
    message: text,
    icon: 'check_circle',
    position: 'top-right',
    classes: 'custom-success-notify'
  });
}

全局样式（如src/styles/global.scss）：

.custom-success-notify .q-notification__icon {
  color: #21ba45;
}

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