Ag grid pagination arrow is not showing properly

Question

I have recently updated my angular project from v5 to v11 and also updated ag grid.After up-gradation the pagination button is showing like box not as arrow sign.

<ag-grid-angular #agGrid
                 style="width: 1125px;min-height: 895px;border-radius: 16px;"
                 id="myGrid" 
                 class="ag-theme-balham"
                 [rowData]="rowData" 
                 [enableSorting]="true"
                 [enableFilter]="true" 
                 [enableColResize]="true"
                 [paginationPageSize]="paginationPageSize"
                 [columnDefs]="columnDefs"
                 [autoGroupColumnDef]="autoGroupColumnDef"
                 [icons]="icons"
                 [rowSelection]="rowSelection" 
                 (gridReady)="onGridReady($event)"
                 [paginationAutoPageSize]="true"
                 [pagination]="true" 
                 [suppressRowClickSelection]="true" 
                 [groupSelectsChildren]="true"
                 [debug]="true" 
                 [enableRangeSelection]="true" 
                 [defaultColDef]="defaultColDef"
                 [components]="components"
                 [frameworkComponents]="frameworkComponents"
                 [context]="context"
                 [headerHeight]="headerHeight" 
                 [gridOptions]="gridOptions" 
                 [suppressContextMenu]="true" 
                 [suppressMenuMainPanel]="true"
                 [suppressMenuColumnPanel]="true"
                 (cellClicked)='onCellClicked($event)'
                 [floatingFilter]="false"
                 [enableColResize]="true" 
                 [rowHeight]='32' >
</ag-grid-angular>

My grid option:

this.gridOptions = {

  context: {
    componentParent: this
  },
  enableColResize: true,
  enableSorting: true,
  // enable filtering 
  enableFilter: true,
  headerHeight:30,
}

Package.json: "ag-grid": "^18.1.2", "ag-grid-angular": "^24.1.0", "ag-grid-community": "^24.1.0", "ag-grid-enterprise": "^24.1.0", "angular-font-awesome": "^3.1.2"

Please let me know where i m doing wrong, any help is appreciated

Answer 1

I got the answer by just importing the css file in main style.css

@import "../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";

and it started working properly.

Answer 2

I had the same Issue in ag-grid react. I found that the Issue is because of opacity. So I override the CSS property.

.ag-theme-alpine .ag-paging-button {
  opacity: 1;
}