Add icon after input using Angular

Question

I'm using Angular 7. When I open my dialog, I want to set a star icon after the input, as shown by the arrows, not in the input as at present.

This is my dialog:

enter image description here

This is my html:

<h1 mat-dialog-title>{{'DNS.Create entry' | translate }}</h1>
<div mat-dialog-content fxLayout="row" fxLayoutAlign="center center">
    <form name="createEntryForm" [formGroup]="createEntryForm" fxLayout="column" fxFlex="100">
        <mat-form-field>
            <mat-label>Type</mat-label>
            <mat-select placeholder="type" formControlName="type" [(ngModel)]="entrType">
                <mat-option value="A">A</mat-option>
                <mat-option value="CNAME">CNAME</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-icon class="amber-600-fg" matTooltip="Click to add/remove shortcut">star</mat-icon>
        <mat-form-field *ngIf="entrType == 'A'">
            <mat-label>Hostname</mat-label>
            <input matInput formControlName="hostname">
            <span matSuffix>.{{ domain.name }}</span>
            <mat-error *ngIf="hostname.errors?.pattern">{{'DNS.Hostname not valid' | translate }}</mat-error>
        </mat-form-field>
        <mat-form-field *ngIf="entrType == 'CNAME'">
            <mat-label>Hostname</mat-label>
            <input matInput formControlName="hostname">
            <span matSuffix>.{{ domain.name }}</span>
            <mat-error *ngIf="hostname.errors?.pattern">{{'DNS.Hostname not valid' | translate }}</mat-error>
        </mat-form-field>
        <mat-icon class="amber-600-fg" matTooltip="Click to add/remove shortcut">star</mat-icon>
        <mat-form-field *ngIf="entrType == 'A'">
            <mat-label>{{'DNS.IP address' | translate }}</mat-label>
            <input matInput formControlName="value">
            <mat-error *ngIf="value.errors?.pattern">
                {{'DNS.Value not valid' | translate }}
            </mat-error>
        </mat-form-field>
        <mat-icon class="amber-600-fg" matTooltip="Click to add/remove shortcut">star</mat-icon>
        <mat-form-field *ngIf="entrType == 'CNAME'">
            <mat-label>FQDN cible</mat-label>
            <input matInput formControlName="value">
            <mat-error *ngIf="value.errors?.pattern">
                {{'DNS.Value not valid' | translate }}
            </mat-error>
        </mat-form-field>
        <mat-form-field>
            <mat-label>TTL</mat-label>
            <mat-select placeholder="ttl" formControlName="ttl" [(ngModel)]="ttlType">
                <mat-option value="300">5 min</mat-option>
                <mat-option value="3600">{{'DNS.1 hour' | translate }}</mat-option>
                <mat-option value="86400">{{'DNS.1 day' | translate }}</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-icon class="amber-600-fg" matTooltip="Click to add/remove shortcut">star</mat-icon>
    </form>
</div>
<div mat-dialog-actions fxLayoutAlign="end center">
    <button mat-button (click)="onCancelClick()">{{'DNS.Cancel' | translate }}</button>
    <button mat-raised-button color="primary" [mat-dialog-close]="createEntryForm" [disabled]="createEntryForm.invalid">{{'DNS.Create'
        | translate }}</button>
</div>

I appreciate any help to resolve this problem.

I meant the form need to be wider. You can style it in css or flexlayout I guess. There a is an overflow. Something like fxFlex="120" ? — Vega
– Vega, Commented Mar 27, 2019 at 15:15

Daniel · Accepted Answer · 2019-03-27 15:34:19Z

1

Use matPrefix or matSuffix

<mat-form-field>
    <input matInput placeholder="Amount" type="number">
    <span matPrefix>ICON HERE</span>
    <span matSuffix>ICON HERE</span>
</mat-form-field>

https://stackblitz.com/angular/vkgoyrdlnyjp?file=app%2Fform-field-prefix-suffix-example.html

https://material.angular.io/components/form-field/overview

edited Mar 27, 2019 at 15:34

answered Mar 27, 2019 at 15:10

Daniel

1,0428 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdelhaq BENDIDANE Over a year ago

I want to insert after the input not in the input

kwcolson98 · Accepted Answer · 2020-02-06 17:49:48Z

1

To keep the image out of the actual input, but on the same row, you can put the input and the image in a row of their own:

<div fxLayout="row"> 
<mat-form-field>
        <mat-label>Type</mat-label>
        <mat-select placeholder="type" formControlName="type" [(ngModel)]="entrType">
            <mat-option value="A">A</mat-option>
            <mat-option value="CNAME">CNAME</mat-option>
        </mat-select>
</mat-form-field>
<mat-icon class="amber-600-fg" matTooltip="Click to add/remove shortcut">star</mat-icon>
</div>

answered Feb 6, 2020 at 17:49

kwcolson98

771 silver badge8 bronze badges

Comments

Khalid Manasra · Accepted Answer · 2019-03-27 19:03:44Z

0

use font awesome for you input fields

mat-selec::after { 
  font-family: "Font Awesome 5 Free";
  content: "\f005";
}

edited Mar 27, 2019 at 19:03

answered Mar 27, 2019 at 15:14

Khalid Manasra

232 silver badges6 bronze badges

2 Comments

Abdelhaq BENDIDANE Over a year ago

i try what you gave me but he inserts the icon in the input me i want to insert it after the input show the image please

Khalid Manasra Over a year ago

use font awesome for you input fields

Collectives™ on Stack Overflow

Add icon after input using Angular

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related