angularangular-materialmat-sidenavmat-chip

Angular Material Chips appearing as rectangle instead of being Rounded inside a sidenav

I created a stackblitz example

If you open the side nav and then see the chip on the expansion panel you will see its rectangular in shape but it should look circular. How do I fix this ?

Edit: This is there as an issue already on Github

Solution

  • Chips must be inside a <mat-chip-list>.

    https://material.angular.io/components/chips/overview

    <mat-chip-list>
  <mat-chip>Papadum</mat-chip>
  <mat-chip>Naan</mat-chip>
  <mat-chip>Dal</mat-chip>
</mat-chip-list>