如何替换AG Grid复选框的勾选字体图标？

可以替换该图标，下面是针对你场景的有效解决方案：

一、CSS优先级覆盖方案（最直接有效） #

你之前自定义CSS无效的核心原因是样式优先级低于AG Grid默认样式，用更具体的选择器+强制优先级即可解决：

1. 确认style.scss的必要导入 #

如果项目未全局引入Bootstrap Icons字体，先在style.scss中添加字体声明（路径根据你项目实际文件位置调整）：

@font-face {
  font-family: "bootstrap-icons";
  src: url("../assets/fonts/bootstrap-icons.woff2") format("woff2"),
       url("../assets/fonts/bootstrap-icons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

如果是通过CDN引入Bootstrap Icons，确保index.html中已加入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.x/font/bootstrap-icons.css">

2. 添加高优先级覆盖样式 #

// 覆盖AG Grid选中状态的复选框图标
.ag-checkbox-input-wrapper.ag-checkbox-checked::after {
  font-family: "bootstrap-icons" !important;
  content: "\f272" !important;
  font-size: 16px; // 根据需求调整图标大小
}

// 可选：覆盖未选中状态的图标
.ag-checkbox-input-wrapper::after {
  font-family: "bootstrap-icons" !important;
  content: "\f273" !important; // Bootstrap的空心方块图标
  font-size: 16px;
}

二、修复GridOptions的JavaScript配置方式 #

你之前用GridOptions配置无效，大概率是图标类名写法错误，Bootstrap Icons的类名格式是bi bi-xxx，正确配置如下：

import { GridOptions } from 'ag-grid-angular';

export class YourComponent {
  gridOptions: GridOptions = {
    // 其他AG Grid配置...
    icons: {
      checkboxChecked: '<i class="bi bi-check2"></i>',
      checkboxUnchecked: '<i class="bi bi-square"></i>',
      checkboxIndeterminate: '<i class="bi bi-square-half"></i>' // 可选：半选状态图标
    }
  };
}

这种方式要求Bootstrap Icons的CSS已全局加载（比如在angular.json的styles数组中加入node_modules/bootstrap-icons/font/bootstrap-icons.css）。

关键注意事项 #

• 确认AG Grid元素类名：AG Grid 27.x的复选框容器类是.ag-checkbox-input-wrapper，若版本不同需通过浏览器开发者工具重新确认；
• 字体路径校验：本地字体文件的路径必须和项目实际存放位置一致，否则图标会显示为方块；
• 优先级保障：若自定义样式仍不生效，可以给选择器添加父容器类（比如你的组件根类）进一步提升优先级，或者保留!important强制覆盖。

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