Search code examples
javascriptjqueryhtmlangular6angular-ui

Want to change the arrow from large size to small size


I am using angular2-multiselect and by default arrow size is large I want to decrease the size of the dropdown arrow.

<angular2-multiselect
  class="form-control"
  [data]="dropdownList1"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings"
  (onSelect)="onItemSelect($event)"
  (onDeSelect)="OnItemDeSelect($event)"
  (onSelectAll)="onSelectAll($event)"
  (onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>

<angular2-multiselect
  class="form-control"
  [data]="dropdownList1"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings"
  (onSelect)="onItemSelect($event)"
  (onDeSelect)="OnItemDeSelect($event)"
  (onSelectAll)="onSelectAll($event)"
  (onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>

Solution

  • use below code in your style sheet

    :host /deep/ 
    
    .selected-list .fa-angle-down{
      font-size: 8pt !important;
    
    }
    
    .selected-list .fa-angle-up{
          font-size: 8pt !important;
    
        }