Inserting a Custom SVG Icon into ComboBox in Vue

Background:

Wijmo ComboBox allows you to customize how items are displayed in the drop-down list. One effective way to enhance usability is to insert custom SVG icons next to each item, useful for visual categories, status indicators, or branding.

Steps to Complete:

1. Prepare a data source that includes an icon identifier or SVG source per item.
2. Use a custom item template to render the SVG icon alongside the item text.
3. Optionally apply CSS to adjust spacing and alignment.

Getting Started:

Prepare a data source that includes an icon identifier or SVG source per item

Each ComboBox item contains both a label and an SVG string. We include an icon property in each data object so the template can render it.

<script>
import { WjComboBox } from '@mescius/wijmo.vue2.input';

export default {
  components: { WjComboBox },

  data() {
    return {
      items: [
        {
          name: 'Home',
          icon: '<svg width="16" height="16"><!-- SVG markup for home --></svg>'
        },
        {
          name: 'Work',
          icon: '<svg width="16" height="16"><!-- SVG markup for work --></svg>'
        },
        {
          name: 'Settings',
          icon: '<svg width="16" height="16"><!-- SVG markup for settings --></svg>'
        }
      ]
    };
  }
};
</script>

• Each object has a name and an icon field.
• The icon field contains inline SVG markup.
• This structure allows the ComboBox to display both text and icon.

Use a custom item template to render the SVG icon alongside the item text

Vue’s itemTemplate slot lets you fully control how each item renders in the dropdown. We inject the SVG alongside the label.

<template>
  <wj-combo-box
    :itemsSource="items"
    displayMemberPath="name"
  >
    <template v-slot:itemTemplate="ctx">
      <div class="combo-item">
        <span
          class="combo-icon"
          v-html="ctx.item.icon"
        ></span>
        <span class="combo-text">
          {{ ctx.item.name }}
        </span>
      </div>
    </template>
  </wj-combo-box>
</template>

• Vue’s itemTemplate slot lets you fully control how each item renders in the dropdown. We inject the SVG alongside the label.
• v-slot:itemTemplate provides access to each item (ctx.item).
• v-html renders the raw SVG string inside the span.

Optionally apply CSS to adjust spacing and alignment

CSS ensures the SVG icon and label are aligned cleanly in the dropdown list.

.combo-item {
  display: flex;
  align-items: center;
}

.combo-icon {
  display: inline-block;
  margin-right: 8px;
  width: 16px;
  height: 16px;
}

.combo-text {
  flex: 1;
}

• .combo-item aligns icon and text horizontally.
• .combo-icon ensures proper spacing.
• The result looks visually polished and consistent.

With this Vue setup:

• Each ComboBox entry displays an SVG icon alongside its label.
• Icons render inline without external image requests.
• The dropdown becomes visually richer and easier to scan.

Happy coding!