Chip

Assist chip

<div class="chip chip--assist">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Assist chip
  </div>
</div>
<div class="chip chip--assist chip--disabled">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Disabled
  </div>
</div>

<br>

<div class="chip chip--assist chip--elevated">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Assist chip
  </div>
</div>
<div class="chip chip--assist chip--elevated chip--disabled">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Disabled
  </div>
</div>

Filter chip

<div class="chip chip--filter">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Assist chip
  </div>
</div>
<div class="chip chip--filter chip--disabled">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Disabled
  </div>
</div>

<br>

<div class="chip chip--filter chip--elevated">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Assist chip
  </div>
</div>
<div class="chip chip--filter chip--elevated chip--disabled">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Disabled
  </div>
</div>

<br>

<div class="chip chip--filter chip--selected">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Assist chip
  </div>
</div>
<div class="chip chip--filter chip--selected chip--disabled">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Disabled
  </div>
</div>

<br>

<div class="chip chip--filter chip--elevated chip--selected">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Assist chip
  </div>
</div>
<div class="chip chip--filter chip--elevated chip--selected chip--disabled">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Disabled
  </div>
</div>

Input chip

<div class="chip chip--input">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Input chip
  </div>
  <div class="chip__action">
    <button type="button" class="icon-button">
      <span class="material-icons">close</span>
    </button>
  </div>
</div>
<div class="chip chip--input">
  <div class="chip__avatar">
    <span class="material-icons">account_circle</span>
  </div>
  <div class="chip__label">
    Input chip
  </div>
  <div class="chip__action">
    <button type="button" class="icon-button">
      <span class="material-icons">close</span>
    </button>
  </div>
</div>
<div class="chip chip--input chip--disabled">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Disabled
  </div>
  <div class="chip__action">
    <button type="button" class="icon-button">
      <span class="material-icons">close</span>
    </button>
  </div>
</div>

<br>

<div class="chip chip--input chip--selected">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Input chip
  </div>
  <div class="chip__action">
    <button type="button" class="icon-button">
      <span class="material-icons">close</span>
    </button>
  </div>
</div>
<div class="chip chip--input chip--selected">
  <div class="chip__avatar">
    <span class="material-icons">account_circle</span>
  </div>
  <div class="chip__label">
    Input chip
  </div>
  <div class="chip__action">
    <button type="button" class="icon-button">
      <span class="material-icons">close</span>
    </button>
  </div>
</div>
<div class="chip chip--input chip--selected chip--disabled">
  <div class="chip__icon">
    <span class="material-icons">check</span>
  </div>
  <div class="chip__label">
    Disabled
  </div>
  <div class="chip__action">
    <button type="button" class="icon-button">
      <span class="material-icons">close</span>
    </button>
  </div>
</div>

Suggestion chip

<div class="chip chip--suggestion">
  Suggestion chip
</div>
<div class="chip chip--suggestion chip--disabled">
  Disabled
</div>

<br>

<div class="chip chip--suggestion chip--elevated">
  Suggestion chip
</div>
<div class="chip chip--suggestion chip--elevated chip--disabled">
  Disabled
</div>

<br>

<div class="chip chip--suggestion chip--selected">
  Suggestion chip
</div>
<div class="chip chip--suggestion chip--selected chip--disabled">
  Disabled
</div>

<br>

<div class="chip chip--suggestion chip--elevated chip--selected">
  Suggestion chip
</div>
<div class="chip chip--suggestion chip--elevated chip--selected chip--disabled">
  Disabled
</div>