芯片关闭按钮不符合CSS

Question

我似乎无法使芯片上的闭合x出现并遵守.css。

这是HTML：

<ion-card>
  <ion-card-content>
    <ion-label>City</ion-label>
      <input placeholder="Enter city" #searchPlaces>
    <div class="selected-places">
    <ion-chip *ngFor="let intPlace of intPlaces">
      <ion-label>{{ intPlace }}</ion-label>
      <button (click)="deletePlace(intPlace)">
        <img src="assets/img/ic-small-close.png"/>
      </button>
    </ion-chip>
  </div> 
  </ion-card-content>
</ion-card>

和CSS

.selected-places {
    ion-label{
      width: 79.4px;
      font-family: Gotham;
      font-size: 14.2px;
      font-weight: normal;
      font-style: normal;
      font-stretch: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: left;
      color: black !important;
      overflow-y: visible !important;
     }

     ion-chip{
        display: inline-block;
        padding: 0 25px;
        padding-bottom: 25px;
        height: 30px;
        font-size: 12px;
        line-height: 20px;
        border-radius: 25px;
        background-color: #f1f1f1;
        margin: 3px;
        img{
            width: 3px !important;
            height: 3px !important;
            float: right !important;
        }
    }

由于某种原因，我无法在芯片上显示x。我尝试播放CSS，但不会出现在芯片上。

“ L”下方的灰色竖线条应该是“ x” img。

Answer 1

我通过完全放弃离子芯片而仅使用标签解决了这个问题。我遇到了一些问题，这些问题可以通过不使用ION特定元素而不使用常规html对应元素来解决。