Material Theme: multiple issues

[Arikael]

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/ceolter/ag-grid/blob/master/CONTRIBUTING.md#question

Current behavior
Material theme doesn't work as expected.

• Allow theming svg icons #1982 is not fixed in 15.0.0, the code isn't in the files. (EDIT: this is also true for the bootstrap theme, maybe others too. I just tested material and bootstrap)
• $header-background-color can't be set because it's not in the $params map
• setting header-height when using floatingFilter leads to weird behavior. Example: I set the variable to 30px and headerHeight in gridOptions to 30px, won't be reflect in the filters ag-grid-row
  Result
  <div class="ag-header-row" role="presentation" style="top: 30px; height: 56px; width: 1170px;">
  it will always render 56px

Expected behavior
All are settable.

Minimal reproduction of the problem with instructions
the following code won't set anything

$header-background-color: green;
$icon-color: red;
$header-height: 30px;
@import '~ag-grid/src/styles/ag-grid';
@import '~ag-grid/src/styles/ag-theme-material';

set headerHeight in your GridOptions

• ag-Grid version: 15.0.0

• Browser:

• Language: [SCSS]

[jzahka]

I was struggling with this as well. Just found that in some documentation they use a special webpack loader called svg-colorize-loader. https://github.com/ag-grid/ag-grid-customise-theme/blob/f0d58ffcaa9675d3732636b81b3f081c15152d5e/webpack.config.js#L36

I'm going to try this out today, I'll let you know if it works!

[petyosi]

• you need the loader to customize the icon colours. see the repo @jzahka linked.
• Indeed, the header background color is not customizable in the material theme. The material specs themselves do not suggest different colors for headers. You might tweak that through a css selector, though.
• check the floatingFiltersHeight property in the docs.

Please file your bug reports as a separate issues, that would help us addressing them better. Thanks.

[sumcoding]

@petyosi For those using ag-grid without webpack what are the options to color the icons?

[petyosi]

@sumcoding you can edit the svg files manually and change the colors in there. Of course, any sort of file preprocessing can do that for you.

[Arikael]

but what happened to #1982 ?

I'm using angular cli and ejecting the whole webpack config just to color the svg icons is not an option

[petyosi]

#1982 refers to the svg-webpack-loader implementation - not sure what you mean by referring to it.

If you can afford to support the latest browsers only, then you can also change the colors of the icons using filters over the icon class. This is what I tried initially when implementing the SVG icons. However, it is hard to achieve exact colors with this method. It also does not work well in old IE.

[Arikael]

ok, maybe it completly missunderstood. sorry if that's the case.

I thought the line background-image: url('#{$ag-mat-icons-path}#{$icon}.svg?color=#{encodecolor($ag-mat-icon-color)}'); is CSS/SASS Code and not something for webpack,