Components: md-select: support md-icon

[ciesielskico]

Bug, feature request, or proposal:

Bug/Feature request

What is the expected behavior?

md-select should support md-icons

What is the current behavior?

The icon's string representation is printed inside the md-select, instead of the actual icon.

What are the steps to reproduce?

http://plnkr.co/edit/JUvYgIAoIexRvW19Fng3?p=preview

1. Open plunkr
2. Select an item from md-select (notice that icons in md-option are displayed)
3. After selecting an item, the icon's string representation is displayed inside md-select, instead of the actual icon.

Which versions of Angular, Material, OS, browsers are affected?

angular-cli: 1.0.0-beta.24
node: 6.9.4
os: linux x64
@angular/common: 2.4.3
@angular/compiler: 2.4.3
@angular/core: 2.4.3
@angular/forms: 2.4.3
@angular/http: 2.4.3
@angular/material: 2.0.0-beta.1
@angular/platform-browser: 2.4.3
@angular/platform-browser-dynamic: 2.4.3
@angular/router: 3.1.1
@angular/compiler-cli: 2.4.3

[arlowhite]

EDIT: mis-read the bug. fixing this comment.

Icons do render in the pop-up. However, please fix vertical layout: icon is vertically aligned to the top, not middle.

Confirmed, on selection, the icon value is displayed within the input control instead of the rendered icon.

[skoblenick]

Fix the supplied Plunker: http://plnkr.co/edit/fy1PnCCHnZvmnrrW2Eue?p=preview

[atinybeardedman]

Looks like the plunker isn't working. Here's a working one that shows the issue.
@arlowhite the vertical alignment is a simple css fix. If you change the md-icon vertical alignment to text-bottom it looks fine.

https://plnkr.co/edit/M7rT7n?p=preview

[sangecz]

how does it look? is there any workaround to remove md-icon text?

[willshowell]

@sangecz see https://github.com/angular/material2/pull/3341 for customizing the trigger value

[TimoKunze]

@willshowell So can md-select-trigger be used to display the selected option's icon (md-icon or img)? I gave it a short try, but could not make it work. Maybe the docs could be extended with an example how to do this.

[willshowell]

@TimoKunze, my suggestion is more suitable for removing the md-icon text as @sangecz asked.

That said, if you have some flexibility in how you configure it, this works fine as a workaround for the original issue: http://plnkr.co/edit/7eHeaRGvR87N2MMA32xH?p=preview

[sangecz]

I used svgIcon on md-icon and MdIconRegistry to avoid showing md-icon text:
template:
<md-icon svgIcon="chat"></md-icon>
cmp:

constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
  iconRegistry.addSvgIcon( 'chat', sanitizer.bypassSecurityTrustResourceUrl('assets/img/chat.svg'))
}

but @willshowell's solution looks suitable.

[jelbourn]

I believe this issue is obsolete now that mat-select-trigger exists

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}