How can I hide the filter icon in Ag-grid?

Question

I'm trying to remove the filter icon in ag-grid whilst keeping the filtering box

Right now I'm trying to use pure css to hide the icon which in webpack just adds the aria-hidden="true"

CSS I've tried

* /deep/ div.ag-floating-filter-button{
    display:none !important;   
}

Trying to remove this icon

I either want to completely remove the grid icon using columnsAPI or find a way with CSS to disable the icon truely.

Answer 1

Use floatingFilter and check floatingFilterComponentParams. You can hide the filter button by adding this in columnDefs in gridOptions like below

gridOptions = {
  floatingFilter: true
  columnDefs:[{
    ...
    suppressMenu: true,
    floatingFilterComponentParams: {suppressFilterButton:true}
    ...
  }]
}

Answer 2

This page in the docs describes how to change the icons. I suggest that you change them to an empty string, either in the gridOptions or in a css file. here is the gridOptions way with a plunker:

<ag-grid-angular
    ...
    [icons]="icons"
    ...
    ></ag-grid-angular>


this.icons = {
  filter: ' '
}