select: icon is wrongly positioned in IE11

[johnjesse]

Actual Behavior:

• What is the issue? *
  The dropdown icon is in the wrong place in internet explorer
  Open the following website in internet explorer:
  https://material.angularjs.org/HEAD/demo/select, the icon is very close to the text

it looks like this

• What is the expected behavior?
  Open the page in chrome and firefox, and observe that the drop down icon is at the far right of the select box:
  https://material.angularjs.org/HEAD/demo/select

it should look like this

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
• Details:

See above, open the page in internet explorer

AngularJS Versions: *

• AngularJS Version:
• AngularJS Material Version:

Additional Information:

• Browser Type: *
• Browser Version: *
• OS: *
• Stack Traces:

Browser: Internet Explorer, Version: 11.0.9600.18665CO

The actual problem is you are using text-align: end to define the position of the icon, Internet Explorer has no support for using end with text-align (note Edge also has questionable support according to MDN https://developer.mozilla.org/en-US/docs/Web/CSS/text-align?v=example)

Solution
Use text-align: right in ltr environments and text-align: left in rtl environments

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[johnjesse]

#3840 It seems to have been raised before, although it is clearly not fixed

[Splaktar]

This was tweaked in 70c0c6e, but that only made the carrot not show up under the text. It didn't fix the left-to-right alignment.

I'll try out the changes from https://github.com/angular/material/pull/3840/files to see if they are still effective.

[Splaktar]

PR #11544 posted to fix this.