Incorporate an icon into an Angular Material input field

Question

Incorporate an icon into an Angular Material input field

I want to enhance my input search bar by adding a search icon from Angular Material :

<aside class="main-sidebar">
    <section class="sidebar control-sidebar-dark" id="leftMenu">
        <div>
            <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}">
                        <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>

Trying to apply similar icons as shown in this example http://codepen.io/anon/pen/rOxMdR results in style issues and functionality problems.

Is there a simple way to incorporate a search icon into my current input field?

javascript html css angularjs angular-material

Answer 1

Answer №1

If you're utilizing angular-material-design along with font-awesome-icon, make sure to incorporate the <md-icon> element with the md-font-icon attribute.

Additionally, apply class="md-icon-float" to the md-inout-container.

Check out this live example on Plunker

Make the following change:

<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>

Answer 2

If you're utilizing angular-material-design along with font-awesome-icon, make sure to incorporate the <md-icon> element with the md-font-icon attribute.

Additionally, apply class="md-icon-float" to the md-inout-container.

Check out this live example on Plunker

Make the following change:

<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>

Answer 3

Answer №2

While this question may be dated, I recently encountered the same issue and found a different solution than what was previously suggested by @gaurav. The original poster was seeking a specific outcome which can be seen in this link: https://material.angularjs.org/latest/#/demo/material.components.input

By inspecting the element in the Chrome developer console, it became apparent that the developers of the demo code had implemented a custom class for the icon behavior within the email input section at the bottom icons section. Emulating this behavior allowed me to achieve the desired effect.

Here is the relevant HTML code:

<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>

And here is the accompanying CSS code:

/* Angular extension */
md-input-container.md-input-invalid > md-icon.form-icon {
  color: #B71C1C;
}

An important detail to mention is the necessity of adding the class "md-icon-left" to the md-container to prevent the icons from stacking on top of the input field. This approach worked for my project utilizing angular material v1.1.0 and angular js v1.5.5. Hopefully, this serves as a useful guide for those aiming to replicate the behavior showcased in the Angular Material demo.

Answer 4

While this question may be dated, I recently encountered the same issue and found a different solution than what was previously suggested by @gaurav. The original poster was seeking a specific outcome which can be seen in this link: https://material.angularjs.org/latest/#/demo/material.components.input

By inspecting the element in the Chrome developer console, it became apparent that the developers of the demo code had implemented a custom class for the icon behavior within the email input section at the bottom icons section. Emulating this behavior allowed me to achieve the desired effect.

Here is the relevant HTML code:

<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>

And here is the accompanying CSS code:

/* Angular extension */
md-input-container.md-input-invalid > md-icon.form-icon {
  color: #B71C1C;
}

An important detail to mention is the necessity of adding the class "md-icon-left" to the md-container to prevent the icons from stacking on top of the input field. This approach worked for my project utilizing angular material v1.1.0 and angular js v1.5.5. Hopefully, this serves as a useful guide for those aiming to replicate the behavior showcased in the Angular Material demo.

Incorporate an icon into an Angular Material input field

Answer №1

Answer №2

Similar questions

Iterating through a series of AJAX requests in JavaScript until the variable equals "No" and then terminating the loop

There is a lack of communication between the tomcat application and the database

A guide to updating a button in Angular:

Transferring data between different elements in a React application

What is the best way to implement a dialog box that displays a website within it, all while keeping my SharePoint site running in the background?

Unable to display menu content text using jQuery

JavaScript: specify parameters for function inputs

React's constructor being invoked twice

Concealing Images in HTML Without Reserving Space for Them

Having difficulty swapping out images on an HTML website template for Internet Explorer

What could be the reason for the Checkbox's value not showing up after making changes?

Is the order in which properties are executed always the same in CSS rules?

Tips on expanding the space between words in a scrolling "marquee" text

"Effortlessly Arrange Multiple Gridview Rows Using Checkbox Selection in jQuery Drag and Drop

Tips for breaking out of the traditional 12 column grid using Bootstrap 4 flexbox grid system

Why isn't the jQuery click() function functioning on my modified HTML?

Ways to determine the total number of npm packages installed, excluding development dependencies

Using axios to pass parameters in a post request

What is the most effective method to include JSON data containing various IDs at the end within an $http.get() request in AngularJS?

Trigger an event in Vue with specified parameters