如何在我的select2选择框中显示我选择的图标？

<select id="mySelect2"></select>

$(document).ready(function() {
  // 定义数据源，包含图标和文本
  var data = [
    { id: '1', text: '选项1', icon: 'path/to/icon1.png' },
    { id: '2', text: '选项2', icon: 'path/to/icon2.png' },
    { id: '3', text: '选项3', icon: 'path/to/icon3.png' }
  ];

  // 初始化select2选择框
  $('#mySelect2').select2({
    data: data,
    templateResult: formatOption, // 使用自定义模板显示图标
    templateSelection: formatOption // 使用自定义模板显示图标
  });

  // 自定义模板函数，用于显示图标
  function formatOption(option) {
    if (!option.id) {
      return option.text;
    }

    var $option = $(
      '<span><img src="' + option.icon + '" class="icon" /> ' + option.text + '</span>'
    );

    return $option;
  }
});

.icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}