title: How to add close icon button to mat-basic-chip in Angular Material?
body: <p>I created a custom styled chips list with <code>mat-basic-chip</code> (Unstyled chips) as per <a href="https://material.angular.io/components/chips/overview" rel="nofollow noreferrer">official docs</a></p>
  <p><strong>My Chips look like</strong>
  <a href="https://i.stack.imgur.com/KEmiR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KEmiR.png" alt="enter image description here" /></a></p>
  <p>Now, I want to add close <code>buttons</code> to my chips as default <code>mat-chips</code> have
  <a href="https://i.stack.imgur.com/P989B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P989B.png" alt="enter image description here" /></a></p>
  <p>Here is the template of <code>mat-basic-chip</code></p>
  <pre><code>&lt;mat-basic-chip *ngFor=&quot;let signal of signals&quot;&gt;
                      &lt;div matLine class=&quot;text-center&quot;&gt;{{signal .name}}&lt;/div&gt;
                      &lt;div matLine class=&quot;mt-sm-n1 text-center&quot;&gt;&lt;small&gt;(Default)&lt;/small&gt;&lt;/div&gt;
  &lt;/mat-basic-chip&gt;
  </code></pre>
  <p>As per the official docs  receives the mat-basic-chip CSS class in addition to the mat-chip class.
  So, here is the CSS of .mat-basic-chip to style my custom chips:</p>
  <pre><code>.mat-basic-chip {
    display: inline-block;
    clear: right;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 1vh;
    padding: .7vh 0vh .7vh .7vh;
    margin-right: 2vh;
    margin-top:1vh;
    min-width: 15vh;
   }
  </code></pre>