Change Ag Grid material theme icons and colors not working

Question

I've been trying to get the colors to change for the AgGrid in my application, but they only ever appear as black. I tried recreating the issue in StackBlitz to see if anyone knew why but am now getting an entirely different issue. The icons aren't even showing up in StackBlitz, so I don't even know if I'm able to recreate my first issue.

Here is the StackBlitz: https://stackblitz.com/edit/angular-ogyy69

Any ideas why this might be happening?

Here is the link to the AgGrid Material documentation example they use where they change the Primary and Secondary colors. I've done this exactly but it doesn't seem to be working. https://github.com/ag-grid/ag-grid-material/blob/master/angular-material/src/styles.scss

Your question is confusing, but reading your comments on the existing answer, maybe this helps: stackoverflow.com/a/52138257/405015 — thirtydot
Use his data URI method did the trick, unfortunate that the proper way in the documentation doesn't work — CStreet
Yeah, the guy who wrote that answer is really great. If you only want to change a few things, it's fine to do it like this. Otherwise, go the SCSS route. — thirtydot

Wandrille Wandrille · Accepted Answer · 2019-03-15T15:07:48

You can override the color in style.scss

example :

.ag-center-cols-container{
  .ag-row{
    background-color: red;
    border-color: blue;
  }
}

For the highlighted field :

.ag-cell-focus{
   background-color: green;
}

Change Ag Grid material theme icons and colors not working

1 Answers