Ionic 4 ion-select 为选择图标设置自定义图标

Posted 2023-02-22

【中文标题】Ionic 4 ion-select 为选择图标设置自定义图标

【英文标题】：Ionic 4 ion-select set custom icon for select-icon

【发布时间】：2019-09-19 19:55:27

【问题描述】：

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

<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

【问题讨论】：

你想设置蓝色而不是灰色吗？

是的。我需要蓝色的。这是我的自定义图标

目前这有点棘手。我建议为此创建一个指令：***.com/a/55303341/6294072 不幸的是，目前似乎不是更好的选择。

【参考方案1】：

在 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; 

【参考方案2】：

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

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

?StackBlitz 工作示例

【讨论】：

效果很好！这应该是公认的答案。这似乎是解决问题的最正确方法。

【参考方案3】：

这在 i5 中对我有用：

ion-select::part(icon) 
  opacity: 1;
  margin-left: 1em;
  color: transparent;
  background: url('assets/icons/light-mode/expand-down.svg') no-repeat center;

【参考方案4】：

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

ion-select 
  min-width: 100vw;