title: how to resize mat chip in Angular
body: <p>I'm wondering if there is a way to resize <code>mat-chip</code> and <code>mat-form-field</code> to a smaller size? Currently, my <code>mat-form-field</code> for chips is really big and almost the same size as other fields, such as the description field, so I want the form fields for chips and the chip itself to be smaller.</p>
  <pre><code>&lt;mat-chip-list #chipList&gt;
      &lt;div&gt;
          &lt;mat-chip *ngFor=&quot;let superTag of superTags&quot; [selectable]=&quot;selectable&quot; [removable]=&quot;removable&quot;
              (removed)=&quot;remove(superTag)&quot;&gt;
              &lt;img class=&quot;super-icon&quot; src=&quot;/assets/images/icons/super-tag-icon.svg&quot;&gt;
              {{superTag.tag}}
              &lt;mat-icon matChipRemove *ngIf=&quot;removable&quot; matTooltip=&quot;Remove a super tag&quot;&gt;cancel&lt;/mat-icon&gt;
          &lt;/mat-chip&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input matInput  #input [(ngModel)]=&quot;tagIn&quot; [formControl]=&quot;tagCtrl&quot; [matAutocomplete]=&quot;auto&quot; [matChipInputFor]=&quot;chipList&quot;
              [matChipInputSeparatorKeyCodes]=&quot;separatorKeysCodes&quot; (matChipInputTokenEnd)=&quot;addTag()&quot;&gt;
          &lt;!-- &lt;img class=&quot;icon&quot; src=&quot;/assets/images/icons/chevron-down-icon.svg&quot; alt=&quot;down&quot;&gt; --&gt;
      &lt;/div&gt;
  &lt;/mat-chip-list&gt;
  </code></pre>
  <pre><code>.form {
      // display: flex;
      width: calc(100% - 80px);
      height: 10px;
  }
  
  .icon {
      margin-top: -12px;
  }
  
  .super-icon {
      width: 15px;
      margin-right: 8px;
  }
  .is-loading ::ng-deep .mat-option-text {
      display: flex;
      justify-content: center;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/rv8ZL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rv8ZL.png" alt="enter image description here" /></a></p>