这对我很有效。
使用CSS修改每个选项的button标签中的内部跨度，去掉半径并指定一个背景图像
选项保持相同的顺序，这就是为什么属性选择器对我有用

.alert-radio-icon{
    border-radius: 0 !important;
    border: none !important;
    height: 40px !important;
    width: 40px !important;
    background-size: 40px 40px !important;
    background-repeat: no-repeat ;
}

    [id^="alert-input-"][id$="-0"] .alert-radio-icon{
        background-image: url("../assets/images/menu/flag_ni.png") !important;
    }
     [id^="alert-input-"][id$="-1"] .alert-radio-icon{
        background-image: url("../assets/images/menu/flag_gt.png") !important;
    }
    .alert-radio-inner{
        background-color: transparent !important;
    }

嘿你可以试试这个...
这对我很有效。。看看这个网站：https://www.alt-codes.net/star_alt_code.php
我用这个代码：✰
我的代码如下所示：

<ion-item>
            <ion-label>Member's Overall Rating</ion-label>
            <ion-select [(ngModel)]="newreport.memberstatus">
            <ion-option value="&#10032;">&#10032;</ion-option>
            <ion-option value="&#10032;&#10032;">&#10032;&#10032;</ion-option>
            <ion-option value="&#10032;&#10032;&#10032;">&#10032;&#10032;&#10032;</ion-option>
            <ion-option value="&#10032;&#10032;&#10032;&#10032;">&#10032;&#10032;&#10032;&#10032;</ion-option>
            <ion-option value="&#10032;&#10032;&#10032;&#10032;&#10032;">&#10032;&#10032;&#10032;&#10032;&#10032;</ion-option>
            </ion-select>
            </ion-item>

结果是这样的（屏幕截图在我的手机上导致即时通讯测试在我的手机上）：
screenshot of what the results would be like

图标选择中的图标：

x1c 0d1x的数据
离子选择选项只返回字符串，但是，所有的离子选择技术上做的是显示一个界面，看起来像一个下拉菜单。
简而言之，在本例中，您可以创建一个弹出组件，将下拉列表放在一个可单击的ion-item中，禁用该下拉列表，使其看起来已启用（对于UX），在单击ion-item时单击该下拉列表，然后使用该引用在该位置打开一个弹出组件。
所以，我在做这件事的时候做了一些考虑：
1.我不想重新创建下拉框和图标，我只想更改它的显示内容
1.我还希望图标是可点击的
解决方案我结束了（注意，这也是使用ReactiveForms）：

菜单选项界面ts

export interface MenuOptions {
  key: string;
  fn: () => {};
}

MenuOptions将保存按下按钮时要显示的值和要运行的函数

主要组件ts

constructor(private cd: ChangeDetectorRef){}

menuOptions: MenuOptions[] = [
    {
      key: "Text",
      fn: () =>
        this._showAlert("Select this option if you want to type in values"),
    },
    {
      key: "List",
      fn: () =>
        this._showAlert(
          "Select this option if you want to use a pre-defined list of values"
        ),
    },
    {
      key: "Textbox",
      fn: () =>
        this._showAlert(
          "Select this option if you want an area to type a block of text"
        ),
    },
];

// Find location of where popover is to appear and click the element
// which will then trigger the (click) event
onSelectionClick(event: any) {
    let element: HTMLElement = document.getElementById('popoverLoc') as HTMLElement;
    element.click();
}

async openPopover(event: any) {
    const popover = await this.popover.create({
      component: SelectionTypePopoverComponent,
      componentProps: {
        menuOptions: this.menuOptions
      },
      event,
      translucent: true,
    });

    await popover.present();

    const {data} = await popover.onWillDismiss();

    // Get return from popover and set selection value
    this.itemFeatureForm.get('selectionType').setValue(data['selectionType']);

        // If you hardcode the menu options directly in the popover component and pass them back
        // you will need to trigger change detection manually and set array to have 1 value
        // otherwise your dropdown wont appear properly
        // menuOptions: MenuOptions[] =  [{ key: '', fn: () => '' }] 
        //this.cd.detectChanges();
    }

主要.组件.html

<ion-item button (click)="onSelectionClick($event)" detail="false">
        <ion-label class="enableItem">Selection Type</ion-label>
        <ion-select
          formControlName="selectionType"
          class="enableItem"
          id="popoverLoc"
          (click)="openPopover($event)"
        >
          <ion-select-option
            *ngFor="let option of menuOptions"
            [value]="option.key"
            >{{ option.key }}</ion-select-option
          >
        </ion-select>
      </ion-item>

1.将Ion-Label/Ion-Select Package 在一个可点击的Ion-Item中。这将是注册第一次点击的内容。
1.确保禁用离子选择：selectionType: new FormControl({value: '', disabled: true}),
1.使Ion-Select看起来已启用的enableItem类：.enableItem {opacity: 1 !important;}
1.将id设置为标记离子选择的位置

弹出窗口.组件.html

<ion-list>
  <div *ngFor="let option of menuOptions; let i = index">
    <ion-grid class="ion-no-padding">
      <ion-row class="ion-no-padding">
        <ion-col class="ion-no-padding">
          <ion-item button detail="false" (click)="onSelection(i)">
            <ion-label>{{ option.key }}</ion-label>
          </ion-item>
        </ion-col>
        <ion-col class="ion-no-padding" size="2">
          <ion-item class="ion-no-padding">
            <ion-button class="ion-no-padding" fill="clear" (click)="onInfo(i)">
              <ion-icon
                name="information-circle-outline"
                slot="icon-only"
              ></ion-icon>
            </ion-button>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-list>

确保设置图标列的大小

弹出窗口组件.ts

onSelection(index: number) {
    this.popoverCtrl.dismiss({
      selectionType: this.menuOptions[index].key,
    });
}

onInfo(index: number) {
    this.menuOptions[index].fn();
}

我还没有在物理设备上做过测试，但当我这样做时，如果这不起作用，我会更新，但目前，有了这个模式，我可以让任何我想出现在下拉列表中，仍然使用离子模板...巨大的权力，责任和所有这一切。

我能想到的最好的方法是使用unicode字符作为ion-option内容。📊

Ionic. See comment from Kensodeman on this issue不支持此功能
所以我想这是唯一可能的某种变通办法，如路易斯建议。

我找到了一个可能的快速解决方案

<ion-select interface="popover" [interfaceOptions]="{ cssClass: 'myClass' }">
 <ion-select-option> value </ion-select-option>
 <ion-select-option> value </ion-select-option>
</ion-select>

global.css

.myClass{
    ion-item:nth-child(1) .sc-ion-select-popover-md{
        background: url("/my-icon");
        background-size: 20px;
        background-repeat: no-repeat;
        padding: 0px 27px;
    }
    ion-item:nth-child(2) .sc-ion-select-popover-md{
        background: url("/my-icon");
        background-size: 20px;
        background-repeat: no-repeat;
        padding: 0px 27px;
    }
}

根据接口替换css类