Remove checkmark from Angular Material Chip, but keep avatar image

Question

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>

Chip with checkmark hidden, but with open space.

Expected outputs:

Selected chip, without checkmark and no avatar set Selected chip, without checkmark and avatar set

Answer 1

Could you try the below CSS. The HTML structure seems to have changed. I am using ::ng-deep here to style the chips(deprecated) you can also use globalstyles files with a class to scope these changes.

HTML:

<mat-chip-listbox selectable multiple>
  <mat-chip-option #c *ngFor="let country of activeCountries">
      <img src="https://flagcdn.com/w20/al.png" width="20" />
    {{ transPrefixCountries + country.country }}
  </mat-chip-option>
</mat-chip-listbox>

<mat-chip-listbox selectable multiple>
  <mat-chip-option #c *ngFor="let country of activeCountries">
    {{ transPrefixCountries + country.country }}
  </mat-chip-option>
</mat-chip-listbox>

CSS:

::ng-deep
  .mdc-evolution-chip__action[aria-selected='true']
  .mdc-evolution-chip__graphic.mat-mdc-chip-graphic {
  display: none !important;
}

::ng-deep .mdc-evolution-chip__action[aria-selected='true'] {
  padding-left: 12px !important;
}

Stackblitz Demo