@primevue datatable filter icon change

[subhajit-8]

Can we change primevue datatable default filter icon to a custom one. I need a dropdown icon instead of filter icon. Please help me with an update on the same

[atakantepe]

Hi, yes, you can change the icon using custom icons. You can check these docs
➡️ https://primevue.org/customicons/
➡️ https://primevue.org/datatable/#api.column.slots.filtericon

You can add your own icon like this.

<Column field="name" header="Name" style="min-width: 12rem">
  <template #body="{ data }">
    {{ data.name }}
  </template>
  <template #filter="{ filterModel, filterCallback }">
    <InputText
      v-model="filterModel.value"
      type="text"
      @input="filterCallback()"
      class="p-column-filter"
      placeholder="Search by name"
    />
  </template>
  <template #filtericon>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <g id="chevron-down">
        <path
          d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"
        />
      </g>
    </svg>
  </template>
</Column>

➡️ Also, you can check this example https://stackblitz.com/edit/xqthbj?file=src%2FApp.vue