Set an image icon prior to mat-form-field control

Question

I am a newbie to angular and building a sample application.

I have a situation where I am loading a form from a angular data table. The form on load has attributes that are populated based on data from the database.

For one of the fields in the form, apart from displaying the text, I would like to place an icon before the control to add a visual indicator beyond the text value. This is not an icon from the angular material icon but a custom image.

I am currently facing issues with setting the custom icon inline to the mat-form-field.

When I include the image within the mat-form-field control, i see that icon is in one row and the text field value is in another row.

When I set the image icon outside the mat-form-field control, the label of the field is only above the field value and the image icon shows outside and looks awkward.

Please find the image indicating the issue.

Image below indicates the problem when i have the image control outside of the mat-form-field.

<div class="form-group" *ngIf="showDetailForm">
          <img src="../../assets/icons8-task-480.png" width="24px" height="24px">
          <mat-form-field class="angularformcss no-line " floatLabel="always">
            <input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType">
          </mat-form-field>
        </div>

When i bring the image control within the mat-form-field, the image and the field value are on different lines.

<div class="form-group" *ngIf="showDetailForm">
          <mat-form-field class="angularformcss no-line " floatLabel="always">
            <img src="../../assets/icons8-task-480.png" width="24px" height="24px">
            <input matInput placeholder="Issue type" value="{{issue.issueType}}" id="issueType">
          </mat-form-field>
        </div>

Also, is there a way to set the label field of form field control of angular material in left-right fashion rather than a top-bottom and also increase the size of the label control. Currently the label field looks faded to me.

The CSS classes set on this control have the following code

// This is to set the size of the input mat-form-fields.
.angularformcss {
    font-size: 14px;
    text-align: left;
} 

// This is to remove the line underneath the input controls.
::ng-deep .no-line .mat-form-field-underline {
    display: none;
}

Example Image from JIRA

There are `matPrefix` and `matSuffix` directives to place icons etc. in input form fields. Check out the last example here: https://material.angular.io/components/input/examples — frido, Feb 09 '19 at 22:33
Hi, I even tried that. but even that does not work. I tried with the following code snippet. But even with this image and the text field alignment is not proper and the label for the text field does not include the image. — svijay.aug12, Feb 10 '19 at 06:13
Please add a mockup image of how you want your input field to look like to your question! It's hard to get what specific design you're looking for from text descriptions. If you want a lable to the left of the input and no underline it seems that you're not looking for a material design at all. You might be better of using plain html and css in your case. Material Design text inputs are supposed to look like this https://material.io/design/components/text-fields.html#anatomy — frido, Feb 10 '19 at 12:13
Added an example image to highlight what I was looking for. I wanted to explore two things. One is using angular material to display label and field in left-> right fashion. As well as the ability to display image before a field value using mat-form-field — svijay.aug12, Feb 12 '19 at 06:08
Why do you want to use Angular Material to achieve this?? Angular Material is designed to supply components that comply with the Material Design guidelines. The text field & label layout you want is pretty far from the look of a Material Design text field. — frido, Feb 12 '19 at 11:00

score 6 · Answer 1 · answered Feb 10 '19 at 13:36

6

Add matPrefix directive for img and change some css can get your mat input as your need.

<div class="form-group">
    <mat-form-field class="angularformcss no-line " floatLabel="always">
        <img matPrefix src="https://image.flaticon.com/icons/png/512/23/23765.png" width="24px" height="24px">
        <input matInput placeholder="Issue type" id="issueType">
    </mat-form-field>
</div>

css

:host ::ng-deep .mat-form-field-label-wrapper {
  left: -24px; /* this is the width of image */
}

:host ::ng-deep .mat-input-element {
  margin-left: 5px; /* adding a margin to left of input you can remove it if you want */
}
.angularformcss img {
  margin-bottom: -5px;
}

answered Feb 10 '19 at 13:36

Akhi Akl

3,795
1
15
26

Hi Akhi, Thanks a ton. Your suggestion does work. However, it changes the alignment for other fields as well. I am sorry that I have more repeated questions on this. But I am new to developing using angular and finding it difficult find a solution for such issues. – svijay.aug12 Feb 12 '19 at 13:23
Can you provide a slackblitz demo so I can help you further – Akhi Akl Feb 13 '19 at 07:09

score 1 · Answer 2 · answered Feb 12 '19 at 13:00

The text field design you want to achieve doesn't comply with the Material Design guidelines for text fields.

The Angular Material docs state:

<mat-form-field> is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages.

If you neither want to have the underline, floating label nor hint messages I don't see a point in using Angular Material form fields for your purpose.

Having said that you can of course overwrite the existing Angular Material styles but keep in mind that you might want to tweak your layout in the future and then you'll always have to work against the existing material styles additionally the material styles might change a little in the future, so you might have to change your overwrites when you upgrade to a future version of Angular Material.

1. Angular Material

<div>
  <label class="inputLable">Lable:</label>
  <mat-form-field class="angularformcss no-line" floatLabel="never">
    <img matPrefix class="input-icon" src="https://image.flaticon.com/icons/svg/60/60778.svg" width="24px" height="24px">
    <input type="text" matInput placeholder="Text">
  </mat-form-field>
</div>

::ng-deep .no-line .mat-form-field-underline {
    display: none;
}

.angularformcss {
    font-size: 14px;
    text-align: left;
}

.angularformcss img {
  margin-bottom: -6px;
}

.inputLable {
  padding-right: 20px;
}

2. Custom

Aligning a label, image and text field in a row can be done easily with display: flex.

<div class="input-wrapper">
  <label class="inputLable">Lable:</label>
  <img class ="input-icon" src="https://image.flaticon.com/icons/svg/60/60778.svg" width="24px" height="24px">
  <input class="plainInput mat-typography" type="text" placeholder="Text" /> 
</div>

.inputLable {
  padding-right: 20px;
}

.input-wrapper{
  display: flex;
  align-items: center;
}

.input-wrapper * {
  outline: none;
  background: inherit;
  border: none;
}

.input-icon {
  padding-right: 5px;
}

https://stackblitz.com/edit/angular-nbjcvw

Set an image icon prior to mat-form-field control

2 Answers2

1. Angular Material

2. Custom

Linked