How to replace ag grid checkbox check mark font icon by another one?

I have an Angular project with bootstrap 4.4.1, ag-grid 27.3 and a global style.scss file. I'm able to use bs icons by using the css classes in my typescript and html files.

Now i'm trying to change the checkbox font icon in ag-grid, from "\f106" to "\f272" of bootstrap. I see in the browser that the main two css classes involved with the font icon are:

The font-size and content properties specifically affect the icon (in pink by default)

So, I tried setting the icon css code, but no luck, the browser is not throwing an error but it's not showing it either.

Is it even possible to change that font icon? Do I need to import something to the style.scss?

Edit 1:

Tried all the approaches (sass, svg and javascript) from the docs and wasn't able to make work neither.

Sass:

Added

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"/>

to index.html. Already had these imports in my style.scss:

@import "../node_modules/ag-grid-community/src/styles/ag-grid.scss";
@import "../node_modules/ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material-mixin.scss";

And this for changing the checkbox-checked icon

.ag-theme-material .ag-icon-checkbox-checked {
  //tried all 3 combinations of font
  //--ag-icon-font-family: 'Material Design Icons'; 
  //--ag-icon-font-family: agGridMaterial;
  //--ag-icon-font-family: "agGridMaterial";
  --ag-icon-font-code-checkbox-checked: '\f00c';
}

Svg:

.ag-theme-material .ag-icon-checkbox-checked{
background: transparent url("https://www.ag-grid.com/example-assets/svg-icons/menu.svg") center/contain no-repeat;
  color: transparent;
} 

Javascript (GridOptions or Column Def):

 @Input() gridOptions: GridOptions = {
    ...
    icons: {
      checkboxChecked: '<i class="bi bi-check2"/>',//boostrap font icon
    },
    ...
   }

Have a read of Ag-grid Custom Icon

You can use the custom icon font-family by inserting it in index.html via a <link> and importing it in custom.scss.

Example

index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"/>

custom.scss

.ag-theme-alpine {
  --ag-icon-font-family: 'Font Awesome 5 Free';
  --ag-icon-font-code-aggregation: '\f247';
  --ag-icon-font-code-arrows: '\f0b2';
  --ag-icon-font-code-asc: '\f062';
  --ag-icon-font-code-cancel: '\f057';
  --ag-icon-font-code-chart: '\f080';
  --ag-icon-font-code-color-picker: '\f576';
  --ag-icon-font-code-columns: '\f0db';
  --ag-icon-font-code-contracted: '\f146';
  --ag-icon-font-code-copy: '\f0c5';
  --ag-icon-font-code-cross: '\f00d';
  --ag-icon-font-code-desc: '\f063';
  --ag-icon-font-code-expanded: '\f0fe';
  --ag-icon-font-code-eye-slash: '\f070';
  --ag-icon-font-code-eye: '\f06e';
  --ag-icon-font-code-filter: '\f0b0';
  --ag-icon-font-code-first: '\f100';
  --ag-icon-font-code-grip: '\f58e';
  --ag-icon-font-code-group: '\f5fd';
  --ag-icon-font-code-last: '\f101';
  --ag-icon-font-code-left: '\f060';
  --ag-icon-font-code-linked: '\f0c1';
  --ag-icon-font-code-loading: '\f110';
  --ag-icon-font-code-maximize: '\f2d0';
  --ag-icon-font-code-menu: '\f0c9';
  --ag-icon-font-code-minimize: '\f2d1';
  --ag-icon-font-code-next: '\f105';
  --ag-icon-font-code-none: '\f338';
  --ag-icon-font-code-not-allowed: '\f05e';
  --ag-icon-font-code-paste: '\f0ea';
  --ag-icon-font-code-pin: '\f276';
  --ag-icon-font-code-pivot: '\f074';
  --ag-icon-font-code-previous: '\f104';
  --ag-icon-font-code-right: '\f061';
  --ag-icon-font-code-save: '\f0c7';
  --ag-icon-font-code-small-down: '\f107';
  --ag-icon-font-code-small-left: '\f104';
  --ag-icon-font-code-small-right: '\f105';
  --ag-icon-font-code-small-up: '\f106';
  --ag-icon-font-code-tick: '\f00c';
  --ag-icon-font-code-tree-closed: '\f105';
  --ag-icon-font-code-tree-indeterminate: '\f068';
  --ag-icon-font-code-tree-open: '\f107';
  --ag-icon-font-code-unlinked: '\f127';
  --ag-icon-font-code-checkbox-checked: '\f00c';
  --ag-icon-font-code-checkbox-unchecked: '\f00d';
}

.ag-theme-alpine .ag-icon,
.ag-theme-alpine .ag-checkbox-input-wrapper,
.ag-theme-alpine .ag-radio-button-input-wrapper {
  /* Font Awesome requires bold on all icon elements */
  font-weight: bold;
}

/* selectively replace the group and aggregation icons with Material Design Icons */
.ag-theme-alpine .ag-icon-group {
  --ag-icon-font-family: 'Material Design Icons';
  --ag-icon-font-code-group: '\F0328';
  font-weight: normal;
  color: red;
}
.ag-theme-alpine .ag-icon-aggregation {
  --ag-icon-font-family: 'Material Design Icons';
  --ag-icon-font-code-aggregation: '\F02C3';
  font-weight: normal;
  color: red;
}