Menu
Code is below. Currently the placeholder text overlaps the icon. I need the placeholder text indented to the right of the icon. Perhaps there is a better way to include an icon and placeholder text in a matInput element?
<mat-form-field>
<mat-icon fontSet="myfont"
fontIcon="my-icon-search"
class="search-icon"></mat-icon>
<input id="app_search_input"
matInput
type="search"
placeholder="{{'common.search' | translate}}"
class="search-input">
</mat-form-field>
692
To add icon inside the input element the <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages or in some specific area, it needs the fontawesome link inside the head tag. The fontawesome icon can be placed by using the fa prefix before the icon's name.
The font-awesome icon can be placed by using the fa prefix before the icon's name. Example: In this example, we will take a form where the input field is necessary. After that, we will place the font-awesome icon inside the input field. We will use the CDN link to use the font-awesome icons.
The <input type="text"> defines a single-line text field. The default width of the text field is 20 characters. Tip: Always add the <label> tag for best accessibility practices!
You can use matPrefix.
<mat-form-field>
<mat-icon matPrefix>search</mat-icon>
<input matInput type="search" placeholder="search here" class="search-input">
</mat-form-field>
Both matPrefix and matSuffix are available:
https://stackblitz.com/angular/byemgpqqxdx?file=app%2Finput-prefix-suffix-example.ts
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
