Ionic 4 离子选择为选择图标设置自定义图标

Question

我需要设置一个自定义图标来进行离子选择。以下是我的代码和输出

<ion-item class="input-container" align-items-center no-padding>
        <ion-label position="floating" no-margin no-padding>I am a</ion-label>
        <ion-select formControlName="role" mode="ios" okText="Okay" cancelText="Cancel">
          <ion-select-option value="Admin">Admin</ion-select-option>
          <ion-select-option value="Customer">Customer</ion-select-option>
        </ion-select>
        <ion-icon color="primary" name="arrow-down" mode="ios" slot="end"></ion-icon>
</ion-item>

有没有其他设置自定义图标的方法，或者任何人都可以建议如何删除 select-icon-inner

Answer 1

您可以覆盖图标部分的内容。这对我有用，只需：

ion-select::part(icon) {
  content: url('your-icon-path/your-icon.svg');
}

StackBlitz 工作示例

Answer 2

在 ionic v4 中，解决方法是通过 .scss 文件隐藏图标。

ion-select::part(icon) {
  display: none !important;
}

ion-select::part(text) {
  background-image: url(<ImageUrl>);
  background-position: right;
  background-repeat: no-repeat; 
}

Answer 3

这不是一个正确的解决方案，但它仍然可以解决这个问题。在 .scss 文件中应用此样式 -

ion-select {
  min-width: 100vw;
}