Customizing the material theme in ag-Grid doesn't use the accent-color for the checkbox

Question

When I'm using the standard Material theme for ag-Grid the checkbox gets the pink accent-color when checked. To use the default Material theme I included the following in my styles.scss:

@import "~ag-grid/dist/styles/ag-grid.css";
@import "~ag-grid/dist/styles/ag-theme-material.css";

But when I want to override the theme colors and I follow the guidelines on the ag-Grid site. The checkbox never gets the accent color and is always black, checked and unchecked.

The code in my styles.scss is the following:

$ag-icons-path: '~ag-grid/src/styles/icons/';
$ag-mat-icons-path: '~ag-grid/src/styles/material-icons/';

// Change the primary / accent colors
$primary-color: red;
$accent-color: green;

@import '~ag-grid/src/styles/ag-grid.scss';
@import '~ag-grid/src/styles/ag-theme-material.scss';

Even when I don't set the primary and accent color the checkbox remains black. Where it should have been pink, because that's the default color. It seems that there is a difference when importing the .css files and when importing the .scss files of a theme.

Can anyone help me out here? Or is there a way to create a bug request for this with ag-Grid?

Answer 1

Update for v21:

Version 21+ of ag-grid no longer uses SVG for their icons.

From https://www.ag-grid.com/javascript-grid-icons/

In v21 of ag-Grid we changed how icons are set in the grid. Previous to v21 the icons were svg files that you could override via the '$icons-path' variable in SASS files. v21 uses a WebFont and CSS for the icons which is the best way to allow icon theming.

This means the color can be easily change by overriding the color property.

For example:

.ag-theme-material .ag-icon-checkbox-checked {
  color: mat-color($primary);
}

Original Answer:

I chose to solve this by creating a new SVG definition right in my CSS. I followed the example found here: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images#data-uri-3.

I modified their functions slightly to look like this:

@function _buildIcon($icon) {
  $icon: '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2218px%22%20height%3D%2218px%22%3E#{$icon}%3C%2Fsvg%3E';
  @return $icon;
}

@function _buildPath($path, $parameters) {
  $icon: '%3Cpath%20fill%3D%22#{map-get($parameters, color)}%22%20fill-opacity%3D%22#{map-get($parameters, color-opacity)}%22%20stroke%3D%22#{map-get($parameters, stroke-color)}%22%20stroke-width%3D%22#{map-get($parameters, stroke-width)}%22%20style%3D%22#{map-get($parameters, css)}%22%20d%3D%22#{$path}%22%20%2F%3E';
  @return $icon;
}

@function icon(
  $icon-name,
  $color,
  $color-opacity: 1,
  $stroke-color: transparent,
  $stroke-width: 0,
  $css: '' // arbitrary css
  ){
    $parameters: (
      'color': $color,
      'color-opacity': $color-opacity,
      'stroke-color': $stroke-color,
      'stroke-width': $stroke-width,
      'css': $css
    );

    $icons: (
      checkbox-checked: _buildPath('M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM7 14L2 9l1.41-1.41L7 11.17l7.59-7.59L16 5l-9 9z', $parameters),
      checkbox-unchecked: _buildPath('M16 2v14H2V2h14zm0-2H2C.9 0 0 .9 0 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z', $parameters)
    );

  $icon: _buildIcon(map-get($icons, $icon-name));
  @return url("data:image/svg+xml;charset=utf8,#{$icon}");
}

Then to use it in my SCSS theme file, I did the following:

.ag-theme-material .ag-icon-checkbox-checked:empty {
  $color: mat-color($accent);
  background-image: icon(checkbox-checked, 'rgb(' + red($color) + ', ' + green($color) + ', ' + blue($color) + ')');
}
.ag-theme-material .ag-icon-checkbox-unchecked {
  $color: mat-color($foreground, icon);
  background-image: icon(checkbox-unchecked, 'rgb(' + red($color) + ', ' + green($color) + ', ' + blue($color) + ')', opacity($color));
}