Material: chips: remove icon is larger in 1.1.0 vs 1.0.9

[ddimitrop]

Actual Behavior:

• What is the issue? *
  The remove icons for md-chips are 24px in the 1.1 version. They used to be 18px.
  The change was not intentional but due to the min-width, min-height properties that have now been added in md-icon.
  All references to md-icon in the code (where they override width and height) need to be fixed.
• What is the expected behavior?
  The remove icons should be 18px. This is what this code is trying to do:
  https://github.com/angular/material/blob/master/src/components/chips/chips.scss#L130
  This needs to include now:
  min-height: $chip-delete-icon-size;
  min-width: $chip-delete-icon-size;

I believe that the same problem may be happening in other places like here:
https://github.com/angular/material/blob/dfc9ae7331c2a23552045a4c7baef02ee5d1bc10/src/components/list/list.scss#L62

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  https://material.angularjs.org/latest/demo/chips
• Details:
  Inspect the 'X' icons

Angular Versions: *

• Angular Version: 1.5.5
• `Angular Material Version: 1.1.1

Additional Information:

• Browser Type: Chrome
• `Browser Version: 53
• `OS: Linux
• Stack Traces:

---

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.

[batsauto]

here is my pull request to fix this issue.
https://github.com/angular/material/pull/10491

[Splaktar]

Looking at the Material Design spec for Chips, this remove icon should not be using the Close icon as it is now. It should be using the Cancel icon instead. Also the icon should have an opacity of 0.54. And it should have some additional margins to the left and right.

This CSS seems to get as close to the spec as possible.

    min-width: 18px;
    min-height: 18px;
    position: absolute;
    margin: 0 0 0 4px;
    opacity: 0.54;

This would also require changing https://github.com/angular/material/blob/master/src/components/chips/js/chipsDirective.js#L365 to:

mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdCancel;

Let's try to get the icon sizing fixed in the existing PR and then tackle the rest of this in another issue/PR.

[Splaktar]

This breaking CSS change was part of the 1.1.0 minor release as the CSS is changed from what was in 1.0.9. As this was a minor release, breaking CSS changes like this were acceptable. Additionally, we'll need to wait for another minor release (1.2.0) before this can be fixed since it is a breaking visual change via CSS.