Search code examples
angularangular-material

How can I set an icon next to mat-form-field

I'm currently working on an action-bar which contains a couple of buttons who displays some options to filter/sort current datas, but I'm having trouble tuning the display of an element like the others for a nice display.

enter image description here

Here is my action-bar, and as you can expect when you're looking at it, I want the last element to have his icon at the same height as the others icons, and the select form to have the same height as the others elements.

Small clarification, each button opens the template of an another component, for example, on the following screenshot, I clicked on the filter button, and this opened the filter component template.

Here is my code :

Template of action-bar :

<div class="container d-flex flex-wrap align-items-center justify-content-md-center">
  <app-export
  (outExport)="handleExport($event)"
  class="me-5">
  </app-export>

  <div *ngIf="showStats" class="me-5">
    <button type="button" class="btn btn-outline-secondary d-flex align-items-center" (click)="openStatsDialog()" data-bs-toggle="modal-dialog"><i class="bi bi-graph-up mx-1"></i> {{ "component.filter.filter.stats.title" | translate }}
    </button>
  </div>

  <app-display
  (outDisplayChange)="handleDisplayChange($event)"
  class="me-5">
  </app-display>

  <button class="btn btn-outline-secondary me-5" type="button" data-bs-toggle="collapse" data-bs-target="#filters" aria-expanded="false" aria-controls="filters"
  [ngClass]="{'active': filterOpened}" (click)="filterOpened = !filterOpened">
    <i class="bi bi-funnel"></i> {{ "component.filter.input.name" | translate }}
  </button>
  
  <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#sorts" aria-expanded="false" aria-controls="sorts"
  [ngClass]="{'active': sortOpened}" (click)="sortOpened = !sortOpened">
    <i class="bi bi-sort-alpha-down"></i> {{ "component.filter.filter.sorting.title" | translate }}
  </button>


</div>

<app-filter
    (outFilter)="handleFilter($event)"
    (outFilterAuthor)="handleFilterAuthor($event)"
    (outFilterTitle)="handleFilterTitle($event)"
    [docs]= "docs"
    class="me-5">
</app-filter>
    
<app-sort
    (outFilterOrder)="handleOrderFilter($event)"
    class="me-5">
</app-sort>

Template of filter component :

<div class="row collapse multi-collapse mt-4" id="filters">
    <div class="d-flex flex-wrap align-items-center">
        <div class="input-group me-3 col">
          <div class="input-group-prepend">
            <span class="input-group-text h-100"><i class="bi bi-pencil-square"></i></span>
          </div>
          <input #title type="text" class="form-control text-center" (input)="filtreTitre()" [placeholder]="'component.filter.input.title' | translate">
        </div>
      
          <div class="input-group me-3 col">
            <div class="input-group-prepend">
              <span class="input-group-text h-100"><i class="bi bi-person"></i></span>
            </div>
            <input #auth type="text" class="form-control text-center" (input)="filtreAuteur()" [placeholder]="'component.filter.input.author' | translate">
          </div>
      
          <div class="input-group col">
            <span class="input-group-prepend input-group-text h-100" style="align-self:flex-start;"><i class="bi bi-file-earmark"></i></span>
            <mat-form-field [formGroup]="filterGroup" appearance="fill">
              <mat-label>{{ "component.filter.input.doctype" | translate }}</mat-label>
              <mat-select multiple formGroupName="docType" (selectionChange)="onSelectionChange($event, 'docType', true)" [(value)]="selectedDocTypes">
                <ng-container *ngFor="let doc of docTypes">
                  <mat-option [value]="doc.code" *ngIf="doc.code !== 'POSTER'">{{ 'global.doctypes.' + doc.code | translate }}</mat-option>
                </ng-container>
              </mat-select> 
            </mat-form-field>
          </div>
    </div>
</div>

I already try to put the icon inside the mat-form-field, but It didnt work well, I also tried to work with bootstrap, but same, It didnt work well (maybe I did something wrong so any suggestion is welcome).

Update: I tried to use mat-icon, because I found something called "matPrefix/matSuffix", but It seems like it doesnt work ...

Solution

  • This is the tag containing your icon:

    <span class="input-group-prepend input-group-text h-100" style="align-self:flex-start;"><i class="bi bi-file-earmark"></i></span>

    You should move this to inside your form field and add the matTextPrefix property to it (you might also remove the custom properties added).
    Your code will look like this:

    <mat-form-field [formGroup]="filterGroup" appearance="fill">
  <mat-label>{{ "component.filter.input.doctype" | translate }}</mat-label>
  <mat-select multiple formGroupName="docType" (selectionChange)="onSelectionChange($event, 'docType', true)" [(value)]="selectedDocTypes">
    <ng-container *ngFor="let doc of docTypes">
      <mat-option [value]="doc.code" *ngIf="doc.code !== 'POSTER'">{{ 'global.doctypes.' + doc.code | translate }}</mat-option>
    </ng-container>
  </mat-select> 
  <span matTextPrefix><i class="bi bi-file-earmark"></i></span>
</mat-form-field>

    You can see a demo here (with the dollar sign): https://v16.material.angular.io/components/form-field/examples

    If you want something different from the example (with different border or background) you will probably also need to add extra custom properties to it, but I really don't recommend doing that with angular material.