Add icon to angular material input
Solution 1
As you are using angular-material-design
and font-awesome-icon
use <md-icon>
as element with md-font-icon
attribute.
And use class="md-icon-float"
with md-inout-container
.
Working plunker
Change this :
<md-content md-theme="docs-dark">
<md-input-container style="padding-bottom: 5px;">
<label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label>
<input ng-model="searchInput" id="sInput" ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)">
</md-input-container>
</md-content>
To :
<md-content md-theme="docs-dark">
<md-input-container class="md-icon-float">
<label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label>
<md-icon md-font-icon="fa fa-search"></md-icon>
<input ng-model="searchInput" id="sInput" ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)">
</md-input-container>
</md-content>
Solution 2
This question is very old but I just ran into the same issue this morning and the answer from @gaurav didn't work the same as what the OP was looking for in this link: https://material.angularjs.org/latest/#/demo/material.components.input
If you open the Chrome developer console you can inspect the element and see that the guys who wrote the demo code are using a custom class for the icon behavior of the email input in the bottom icons section. I essentially copied that behavior to achieve the same desired effect.
HTML:
<md-input-container class="md-block md-icon-left">
<md-icon class="form-icon">lock_outline</md-icon>
<label>Password</label>
<input
type="password" ng-model="user.password" name="password"
ng-required="true"
ng-keyup="$event.keyCode == 13 && loginForm.$valid && login()"/>
</md-input-container>
CSS:
/* Angular extension */
md-input-container.md-input-invalid > md-icon.form-icon {
color: #B71C1C;
}
One thing to note is that I had to add the class "md-icon-left" to my md-container or the icons would stack on top of the input. I am using angular material v1.1.0 and angular js v1.5.5 in my project. I hope this answers helps anyone else looking to achieve the same behavior as in the Angular Material demo.
Ellone
Updated on November 20, 2020Comments
-
Ellone over 3 years
I am trying to add a search icon to my input search bar out of Angular Material :
<aside class="main-sidebar"> <section class="sidebar control-sidebar-dark" id="leftMenu"> <div> <!-- need to disable overflow-x somehow cuz of menu --> <md-tabs md-center-tabs id="menuTabs" md-dynamic-height="true" md-selected="selectedIndex"> <md-tab label="<i class='fa fa-search'></i>" ng-if="handleResize()" search-Focus> <md-content class="control-sidebar-dark" ng-style="{'height' : menuHeight}"> <!-- search Menu --> <div> <div> <form action="javascript:void(0)" method="get" class="sidebar-form" id="searchForm"> <div> <md-content md-theme="docs-dark"> <md-input-container style="padding-bottom: 5px;"> <label>{{isEnglish ? 'Search...' : 'Recherche...'}}</label> <input ng-model="searchInput" id="sInput" ng-change="filterCartoList(searchInput)" my-enter="filterCartoList(searchInput)"> </md-input-container> </md-content> </div> </form> <div>
When I'm trying to reproduce the example with icons that we can see there : http://codepen.io/anon/pen/rOxMdR , I'm having style issues and nothing works properly.
Any idea how I could simply add a search icon to my existing input ?
-
Ellone over 8 yearsYea I tried that but, the icon goes upper in a reduced size, just like the placeholder of the input when we focus the input. You can see the placeholder behavior there : material.angularjs.org/latest/#/demo/material.components.input
-
gaurav bhavsar over 8 yearsdid you added class="md-icon-float" ? like this
<md-input-container class="md-icon-float">
-
Ellone over 8 yearsWell, I tried that too after your edit, but then the issue is the height of the content becomes too big, and I have a scrollbar in the input content. I would like to have a one line input with an icon just like the email in the last example there : material.angularjs.org/latest/#/demo/material.components.input
-
gaurav bhavsar over 8 yearsthere is no difference between plunker's example and Email input in angular-material site. the difference is only Email does not have label but have placeholder. I update Plunker again.
-
Ellone over 8 yearsYea but mine gets a scrollbar, it's probably because of one of its parents : aside > section > md-tabs > md-tab > md-content > form > md-content > md-input-container > input