Css 如何自定义离子占位符图标

我有一个文本输入，用于在一个带有放大镜占位符图标的页面上搜索产品。在另一个页面上，我有一个专门用于接收条形码数据的文本输入

我想通过使用条形码图标作为占位符图标来区分这些图标，但是占位符图标似乎特别使用Ionicon字体，而不是CSS或其他东西中定义的图标

有没有办法定义一个可以用作占位符图标的自定义图标

我有如下定义的自定义选项卡图标：

.tabs .tab-item .icon.gmBagOn {
  background-repeat: no-repeat;
  background-position: 50%;
  height: 70%;
  background-image: url('../img/ic_shop_white_24px.svg');
  background-size: contain;
}

我可以在代码中引用以下内容：

我尝试将其定义为图标名

.icon.barcode

，并将其引用为：

<form class="padding" ng-submit="submit(searchUPC)">
   <label class="item item-input">
      <i class="icon ion-barcode"></i>
      <input type="search" placeholder='' ng-model="inputs.textbox">
   </label>
</form>

---

但是，这会创建一个空占位符。另外，在尝试更改占位符图标的颜色时，我发现它采用占位符文本颜色或文本框填充颜色，这使我认为它实际上使用的是字体定义，而不是图标定义。

显示一些代码；到目前为止您尝试了什么？显示一些代码；到目前为止你试过什么？