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
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.
<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>
::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;
}