md-autocomplete: should have a 'display icon' option

[drinkbird]

It's commonplace to display an informative icon next to some controls, especially if that control is used for searching. It would be nice if the autocomplete control could accept an icon property that would result to something like the following:

Cheers

[cleever]

+1

[troig]

+1
At the moment, just as a workaround, we can do something similar with a bit of custom CSS. See plunker

[drinkbird]

@troig thanks for the suggestion, it's similar to what I'm doing for now. It's just so standard to see an icon there that it would make sense to be supported out of the box.

[fernandogomesdf]

+1 for icons

[JLWeich]

+1 for icons

[zcharleshebert]

+1 for icons

[cpBurn]

+1 for icons

[yanndupuy]

This message was created automatically by mail delivery software.

A message that you sent could not be delivered to one or more of its
recipients. This is a temporary error. The following address(es) deferred:

dupuyyann@gmail.com
Domain zyapps.com has exceeded the max emails per hour (405/400 (101%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from github-smtp2-ext1.iad.github.net ([192.30.252.192]:47286 helo=github-smtp2a-ext-cp1-prd.iad.github.net)
by serveur.ex2-p10.com with esmtps (TLSv1.2:ECDHE-RSA-AES256-GCM-SHA384:256)
(Exim 4.87)
(envelope-from noreply@github.com)
id 1avrw3-001GOZ-0S
for yann.dupuy@zyapps.com; Thu, 28 Apr 2016 21:49:21 +0200
Date: Thu, 28 Apr 2016 12:46:34 -0700
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=github.com;
s=pf2014; t=1461872794;
bh=XcunXfD79RD+rg0F3sRfv9cpDQili0DRvK2+Z9tk62Q=;
h=From:Reply-To:To:Cc:In-Reply-To:References:Subject:List-ID:
List-Archive:List-Post:List-Unsubscribe:From;
b=11AxBtTFnMOoEa0Ql/g/CFzkTokCEOc4kd0RLzNpLdYio9onWdc9jUmQyuVFZsSqx
H0PNzrW61Vg6QnFZaGr5mMPFBTTpQOwv8jBiFQaVIw9x58VedFz2icjwJkD5iULnQj
hda53i+2z0nAyVBb4vfE71W+D8/0S5SXd8eDu4yY=
From: Thomas Burleson notifications@github.com
Reply-To: angular/material reply@reply.github.com
To: angular/material material@noreply.github.com
Cc:
Message-ID: angular/material/issue/6150/issue_event/644802168@github.com
In-Reply-To: angular/material/issues/6150@github.com
References: angular/material/issues/6150@github.com
Subject: Re: [angular/material] md-autocomplete: should have a 'display icon'
option (#6150)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_57226899ee68a_40733fa637e3f2c03664a0";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: ThomasBurleson
X-GitHub-Recipient: yanndupuy
List-ID: angular/material <material.angular.github.com>
List-Archive: https://github.com/angular/material
List-Post: mailto:reply@reply.github.com
List-Unsubscribe: mailto:unsub+000df0dcb5185baf73c1aed2b4da8cc382b64819a37730da92cf00000001133a2a9992a169ce0735f8c9@reply.github.com,
https://github.com/notifications/unsubscribe/AA3w3BDmH-YzEDSwophPRXSxiepeTICRks5p8Q6ZgaJpZM4Gw4gA
X-Auto-Response-Suppress: All
X-GitHub-Recipient-Address: yann.dupuy@zyapps.com
X-Spam-Status: No, score=1.5
X-Spam-Score: 15
X-Spam-Bar: +
X-Ham-Report: Spam detection software, running on the system "serveur.ex2-p10.com",
has NOT identified this incoming email as spam. The original
message has been attached to this so you can view it or label
similar future email. If you have any questions, see
root@localhost for details.

Content preview: Closed #6150. --- You are receiving this because you are subscribed
to this thread. Reply to this email directly or view it on GitHub: #6150 (comment)
Closed #6150. [...]

Content analysis details: (1.5 points, 5.0 required)

pts rule name description

---

1.6 HTML_IMAGE_ONLY_12 BODY: HTML: images with 800-1200 bytes of words
0.0 HTML_MESSAGE BODY: HTML included in message
0.1 DKIM_SIGNED Message has a DKIM or DK signature, not necessarily valid
-0.1 DKIM_VALID Message has at least one valid DKIM or DK signature
-0.1 DKIM_VALID_AU Message has a valid DKIM or DK signature from author's
domain
X-Spam-Flag: NO

----==_mimepart_57226899ee68a_40733fa637e3f2c03664a0
Content-Type: text/plain;
charset=UTF-8
Content-Transfer-Encoding: 7bit

Closed #6150.

---

You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
#6150 (comment)
----==_mimepart_57226899ee68a_40733fa637e3f2c03664a0
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit

Closed #6150.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

----==_mimepart_57226899ee68a_40733fa637e3f2c03664a0--

[Dunos]

Is this issue going to be resolved or we should use the CSS workaround all the time?

[leolozes]

I guess it has been closed on the spring issue cleaning spree. Would be really nice to have without nasty CSS hacks though.

[Andrew-Gee]

+1

[peterculak]

+1

[kdsingharneja]

+1

[vlasovt]

+1

[darxx]

+1

[Meshiest]

+1

[jefferson-silva]

+1

[naveen09]

+1

[decko]

👍

[Alexberemart]

+1

[mi60dev]

+1 for icons

[CaptainYouz]

Also, when using the md-autocomplete with a floating label, it can be good to have a select icon at the right, as the simple select component

[ElPsyCongro]

+1

[ronsuez]

+1

[joaocraveiro]

+1

[amirping]

+1

[stephengardner]

+1

[abelbarbosa]

+1

[LuXDAmore]

+1

[themausam]

+1

[csimpi]

+1 for icons

[zcharleshebert]

Since this issue is closed, I don't think this is gonna be fixed. CSS workaround works well so...

[glowinthedark]

This works with @angular/material@12.2.13

As you can see you can have an icon on the left (with matPrefix) or on the right (matSuffix):

<mat-form-field appearance="outline">
  <mat-label>Country of residence</mat-label>
  <input type="text" placeholder="Pick or type a country" aria-label="Country" matInput [formControl]="countryField"
  autocomplete="off"
    [matAutocomplete]="auto">
  <mat-autocomplete formControlName="country" #auto>
    <mat-option>Andorra</mat-option>
    <mat-option>Antigua and Barbuda</mat-option>
    <mat-option>...</mat-option>
  </mat-autocomplete>
  <mat-icon matPrefix>flag</mat-icon>
  <mat-icon matSuffix>language</mat-icon>
  <mat-hint>Location</mat-hint>
</mat-form-field>

[Splaktar]

@glowinthedark Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.