Inserting a Custom SVG Icon into ComboBox in React

Background:

FlexComboBox (Wijmo ComboBox) lets you customize how items are displayed in the drop-down list. One powerful way to enhance usability is to add custom SVG icons next to each item, useful for visual categories, status indicators, or branding. Below is a React-style approach to do exactly that.

Steps to Complete:

1. Prepare a data source that includes an icon identifier or SVG source per item.
2. Use a custom itemFormatter (or itemTemplate) 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 will contain both a label and an SVG path/identifier. We include an icon property in each data object.

const 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>'
  }
];

• Each object has a name and an icon field.
• The icon field contains inline SVG strings that can be rendered directly in React.
• This structure lets the ComboBox know what text and icon should appear per item.

Use a custom itemFormatter (or itemTemplate) to render the SVG icon alongside the item text

The itemFormatter (or wjItemTemplate) let you fully control how each item is drawn. We’ll prefix the item label with the SVG icon markup.

import { ComboBox } from '@mescius/wijmo.react.input';

export default function App() {
  const itemFormatter = (item, index, formatted) => {
    // Insert custom SVG plus name text
    return (
      <div className="combo-item">
        <span
          className="combo-icon"
          dangerouslySetInnerHTML={{ __html: item.icon }}
        />
        <span className="combo-text">{item.name}</span>
      </div>
    );
  };

  return (
    <ComboBox
      itemsSource={items}
      displayMemberPath="name"
      itemFormatter={itemFormatter}
    />
  );
}

• itemFormatter is a React prop that you define as a function.
• It receives each item and returns a custom JSX structure.
• We inject the SVG via dangerouslySetInnerHTML because it contains raw SVG.

Optionally apply CSS to adjust spacing and alignment

CSS ensures the icon and text are aligned nicely 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 adds spacing so text doesn’t sit too close to the icon.

With this React setup:

• Each ComboBox entry displays an SVG icon alongside its label.
• The icons render inline, so there’s no flicker, no external resource loading.
• Users get a richer visual experience that’s especially helpful in menus or selection lists.

Happy coding!