When upgrading my Angular application from version 14 to 18, a lot has changed. I’m using Angular Material for some of the components, and the Chips aren’t working as before.

With the new mat-chip-option, a checkmark (mdc-evolution-chip__checkmark) is added to selected chips. I want to hide this checkmark, but keep my avatar image.

I tried to put the following CSS, but this only hides the checkmark, but keeps the space.

.mdc-evolution-chip__checkmark {
   display: none !important;
}

I noticed that –mdc-chip-with-avatar-avatar-size is defined on .mat-mdc-standard-chip, but when I set this to 0 also my avatar image is gone.

This is the HTML in code:

<mat-chip-listbox selectable multiple>
     <mat-chip-option #c *ngFor="let country of brand.activeCountries" (click)="toggleCountrySelection(c, country.id, brand.name, country.country, 'market')" 
          [selected]="checkMarketCountry(country.id)">
          <mat-chip-avatar>
             <img src="https://flagcdn.com/w20/{{country.country.toLowerCase()}}.png" width="20"/>
          </mat-chip-avatar>
          {{ transPrefixCountries + country.country | translate }}
     </mat-chip-option>
</mat-chip-listbox>

This is the HTML generated:

<span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic ng-star-inserted">
   <mat-chip-avatar role="img" class="mat-mdc-chip-avatar mdc-evolution-chip__icon mdc-evolution-chip__icon--primary">
      <img width="20" src="https://flagcdn.com/w20/be.png">
   </mat-chip-avatar>
   <span class="mdc-evolution-chip__checkmark">
      <svg viewBox="-2 -3 30 30" focusable="false" aria-hidden="true" class="mdc-evolution-chip__checkmark-svg">
         <path fill="none" stroke="currentColor" d="M1.73,12.91 8.1,19.28 22.79,4.59" class="mdc-evolution-chip__checkmark-path"></path>
      </svg>
   </span>
</span>