How to show icons on list items in Vue MultiSelect Dropdown

03 Sep 20264 minutes to read

You can render icons on the list items by mapping the iconCss field. This iconCss field creates a span in the list item with the mapped class name to allow styling as per your need.

In the following sample, icon classes are mapped to the iconCss field.

<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
      <br>
      <ejs-multiselect id='multiselect' :dataSource='sortFormatData' :fields='fields'
        placeholder="Select a format"></ejs-multiselect>
    </div>
  </div>
</template>
<script setup>
import { MultiSelectComponent as EjsMultiselect } from "@syncfusion/ej2-vue-dropdowns";

const sortFormatData = [
  { Class: 'sort', Type: 'Sort A to Z', Id: '1' },
  { Class: 'filter', Type: 'Filter', Id: '2' },
  { Class: 'clear', Type: 'Clear', Id: '3' }
];
const fields = { text: 'Type', iconCss: 'Class', value: 'Id' };

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

.e-list-icon {
  line-height: 1.3;
  padding-right: 10px;
  text-indent: 5px;
}

.sort:before {
  content: '\e890';
  font-family: 'e-icons';
  font-size: 15px;

}

.filter:before {
  content: '\e7ee';
  font-family: 'e-icons';
  font-size: 15px;
  opacity: 0.78;
}

.clear:before {
  content: '\e7fc';
  font-family: 'e-icons';
  font-size: 15px;
}
</style>
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
      <br>
      <ejs-multiselect id='multiselect' :dataSource='sortFormatData' :fields='fields'
        placeholder="Select a format"></ejs-multiselect>
    </div>
  </div>
</template>
<script>
import { MultiSelectComponent } from "@syncfusion/ej2-vue-dropdowns";

export default {
  name: "App",
  components: {
    "ejs-multiselect": MultiSelectComponent
  },
  data() {
    return {
      sortFormatData: [
        { Class: 'sort', Type: 'Sort A to Z', Id: '1' },
        { Class: 'filter', Type: 'Filter', Id: '2' },
        { Class: 'clear', Type: 'Clear', Id: '3' }
      ],
      fields: { text: 'Type', iconCss: 'Class', value: 'Id' }
    }
  }
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

.e-list-icon {
  line-height: 1.3;
  padding-right: 10px;
  text-indent: 5px;
}

.sort:before {
  content: '\e890';
  font-family: 'e-icons';
  font-size: 15px;

}

.filter:before {
  content: '\e7ee';
  font-family: 'e-icons';
  font-size: 15px;
  opacity: 0.78;
}

.clear:before {
  content: '\e7fc';
  font-family: 'e-icons';
  font-size: 15px;
}
</style>