From 2719e046360bd1a7f113b524043eb0a332352657 Mon Sep 17 00:00:00 2001
From: Elad Shahar <SaladFork@Gmail.com>
Date: Wed, 27 Jan 2016 22:29:00 -0500
Subject: [PATCH 1/5] Add default value to icon attr of `paper-icon`

This prevents an error when trying to compute iconClass when no icon is
passed to the component.
---
 addon/components/paper-icon.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/addon/components/paper-icon.js b/addon/components/paper-icon.js
index 1d3a9300f..302b62c51 100644
--- a/addon/components/paper-icon.js
+++ b/addon/components/paper-icon.js
@@ -6,6 +6,7 @@ export default Ember.Component.extend(ColorMixin, {
   classNames: ['paper-icon', 'md-font', 'material-icons', 'md-default-theme'],
   classNameBindings: ['iconClass', 'sizeClass', 'spinClass'],
 
+  icon: '',
   spin: false,
   reverseSpin: false,
 

From fbc6de1f2faa821aa8c99f244de2df1fa0685496 Mon Sep 17 00:00:00 2001
From: Elad Shahar <SaladFork@Gmail.com>
Date: Wed, 27 Jan 2016 22:47:47 -0500
Subject: [PATCH 2/5] Add tests for `paper-icon`

---
 .../integration/components/paper-icon-test.js | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 tests/integration/components/paper-icon-test.js

diff --git a/tests/integration/components/paper-icon-test.js b/tests/integration/components/paper-icon-test.js
new file mode 100644
index 000000000..b7b13b366
--- /dev/null
+++ b/tests/integration/components/paper-icon-test.js
@@ -0,0 +1,86 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('paper-icon', 'Integration | Component | paper icon', {
+    integration: true
+});
+
+test('it renders with tag name', function(assert) {
+    assert.expect(1);
+
+    this.render(hbs`{{paper-icon}}`);
+
+    assert.ok(this.$('md-icon').length);
+});
+
+test('it renders with classes', function(assert) {
+    assert.expect(6);
+
+    this.set('icon', 'foo');
+    this.render(hbs`{{paper-icon icon=icon}}`);
+
+    const $component = this.$('md-icon');
+
+    assert.ok($component.hasClass('paper-icon'));
+    assert.ok($component.hasClass('material-icons'));
+    assert.ok($component.hasClass('foo'));
+    assert.ok($component.hasClass('md-default-theme'));
+
+    this.set('icon', 'bar');
+    assert.ok($component.hasClass('bar'));
+    assert.notOk($component.hasClass('foo'));
+});
+
+test('it renders with spin class', function(assert) {
+    assert.expect(2);
+
+    this.set('spin', true);
+    this.render(hbs`{{paper-icon spin=spin}}`);
+
+    var $component = this.$('md-icon');
+
+    assert.ok($component.hasClass('md-spin'));
+
+    this.set('spin', false);
+    assert.notOk($component.hasClass('md-spin'));
+});
+
+test('it renders with reverse spin class', function(assert) {
+    assert.expect(2);
+
+    this.set('reverseSpin', true);
+    this.render(hbs`{{paper-icon reverseSpin=reverseSpin}}`);
+
+    var $component = this.$('md-icon');
+
+    assert.ok($component.hasClass('md-spin-reverse'));
+
+    this.set('reverseSpin', false);
+    assert.notOk($component.hasClass('md-spin-reverse'));
+});
+
+test('it renders with size class', function(assert) {
+    assert.expect(6);
+
+    this.set('size', 'lg');
+    this.render(hbs`{{paper-icon size=size}}`);
+
+    var $component = this.$('md-icon');
+
+    assert.ok($component.hasClass('md-lg'));
+
+    this.set('size', 'sm');
+    assert.ok($component.hasClass('md-sm'));
+
+    this.set('size', 2);
+    assert.ok($component.hasClass('md-2x'));
+
+    this.set('size', 3);
+    assert.ok($component.hasClass('md-3x'));
+
+    this.set('size', 4);
+    assert.ok($component.hasClass('md-4x'));
+
+    this.set('size', 5);
+    assert.ok($component.hasClass('md-5x'));
+});

From 573d132faf91631a252b005fe19dd192ca27cfdb Mon Sep 17 00:00:00 2001
From: Elad Shahar <SaladFork@Gmail.com>
Date: Wed, 27 Jan 2016 22:48:08 -0500
Subject: [PATCH 3/5] Remove unnecessary spaces in class names in `paper-icon`

---
 addon/components/paper-icon.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/addon/components/paper-icon.js b/addon/components/paper-icon.js
index 302b62c51..1f448161a 100644
--- a/addon/components/paper-icon.js
+++ b/addon/components/paper-icon.js
@@ -16,26 +16,26 @@ export default Ember.Component.extend(ColorMixin, {
 
   spinClass: Ember.computed('spin', 'reverseSpin', function() {
     if (this.get('spin')) {
-      return ' md-spin';
+      return 'md-spin';
     } else if (this.get('reverseSpin')) {
-      return ' md-spin-reverse';
+      return 'md-spin-reverse';
     }
   }),
 
   sizeClass : Ember.computed('size', function() {
     switch(this.get('size')) {
       case 'lg':
-        return ' md-lg';
+        return 'md-lg';
       case 'sm':
-        return ' md-sm';
+        return 'md-sm';
       case 2:
-        return ' md-2x';
+        return 'md-2x';
       case 3:
-        return ' md-3x';
+        return 'md-3x';
       case 4:
-        return ' md-4x';
+        return 'md-4x';
       case 5:
-        return ' md-5x';
+        return 'md-5x';
     }
   }),
 

From 31f2a3222a34f3a21e1180bca012bc2d2da87192 Mon Sep 17 00:00:00 2001
From: Elad Shahar <SaladFork@Gmail.com>
Date: Wed, 27 Jan 2016 22:49:18 -0500
Subject: [PATCH 4/5] Remove commented out unused click code in `paper-icon`

---
 addon/components/paper-icon.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/addon/components/paper-icon.js b/addon/components/paper-icon.js
index 1f448161a..cdda94045 100644
--- a/addon/components/paper-icon.js
+++ b/addon/components/paper-icon.js
@@ -37,11 +37,5 @@ export default Ember.Component.extend(ColorMixin, {
       case 5:
         return 'md-5x';
     }
-  }),
-
-  /*click() {
-    if (this.get('action')) {
-      this.sendAction('action', this.get('param'));
-    }
-  }*/
+  })
 });

From d3ed897d665d1cf7fd6c217306f9069e90c960c2 Mon Sep 17 00:00:00 2001
From: Elad Shahar <SaladFork@Gmail.com>
Date: Wed, 27 Jan 2016 23:15:02 -0500
Subject: [PATCH 5/5] Add support for icon positionalParam for `paper-icon`

Ideally we wouldn't need a separate `positionalIcon` property and could
just use `icon`, but this is not permitted (see emberjs/ember.js#12350)
---
 addon/components/paper-icon.js                | 12 ++-
 .../integration/components/paper-icon-test.js | 99 ++++++++++---------
 2 files changed, 65 insertions(+), 46 deletions(-)

diff --git a/addon/components/paper-icon.js b/addon/components/paper-icon.js
index cdda94045..240c877da 100644
--- a/addon/components/paper-icon.js
+++ b/addon/components/paper-icon.js
@@ -1,7 +1,7 @@
 import Ember from 'ember';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
 
-export default Ember.Component.extend(ColorMixin, {
+var PaperIconComponent = Ember.Component.extend(ColorMixin, {
   tagName: 'md-icon',
   classNames: ['paper-icon', 'md-font', 'material-icons', 'md-default-theme'],
   classNameBindings: ['iconClass', 'sizeClass', 'spinClass'],
@@ -11,7 +11,8 @@ export default Ember.Component.extend(ColorMixin, {
   reverseSpin: false,
 
   iconClass: Ember.computed('icon', function() {
-    return Ember.String.dasherize(this.get('icon'));
+    var icon = this.getWithDefault('positionalIcon', this.get('icon'));
+    return Ember.String.dasherize(icon);
   }),
 
   spinClass: Ember.computed('spin', 'reverseSpin', function() {
@@ -39,3 +40,10 @@ export default Ember.Component.extend(ColorMixin, {
     }
   })
 });
+
+PaperIconComponent.reopenClass({
+  positionalParams: ['positionalIcon']
+});
+
+export default PaperIconComponent;
+
diff --git a/tests/integration/components/paper-icon-test.js b/tests/integration/components/paper-icon-test.js
index b7b13b366..d077d8311 100644
--- a/tests/integration/components/paper-icon-test.js
+++ b/tests/integration/components/paper-icon-test.js
@@ -2,85 +2,96 @@ import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 
 moduleForComponent('paper-icon', 'Integration | Component | paper icon', {
-    integration: true
+  integration: true
 });
 
 test('it renders with tag name', function(assert) {
-    assert.expect(1);
+  assert.expect(1);
 
-    this.render(hbs`{{paper-icon}}`);
+  this.render(hbs`{{paper-icon}}`);
 
-    assert.ok(this.$('md-icon').length);
+  assert.ok(this.$('md-icon').length);
 });
 
 test('it renders with classes', function(assert) {
-    assert.expect(6);
+  assert.expect(6);
 
-    this.set('icon', 'foo');
-    this.render(hbs`{{paper-icon icon=icon}}`);
+  this.set('icon', 'foo');
+  this.render(hbs`{{paper-icon icon=icon}}`);
 
-    const $component = this.$('md-icon');
+  const $component = this.$('md-icon');
 
-    assert.ok($component.hasClass('paper-icon'));
-    assert.ok($component.hasClass('material-icons'));
-    assert.ok($component.hasClass('foo'));
-    assert.ok($component.hasClass('md-default-theme'));
+  assert.ok($component.hasClass('paper-icon'));
+  assert.ok($component.hasClass('material-icons'));
+  assert.ok($component.hasClass('foo'));
+  assert.ok($component.hasClass('md-default-theme'));
 
-    this.set('icon', 'bar');
-    assert.ok($component.hasClass('bar'));
-    assert.notOk($component.hasClass('foo'));
+  this.set('icon', 'bar');
+  assert.ok($component.hasClass('bar'));
+  assert.notOk($component.hasClass('foo'));
 });
 
 test('it renders with spin class', function(assert) {
-    assert.expect(2);
+  assert.expect(2);
 
-    this.set('spin', true);
-    this.render(hbs`{{paper-icon spin=spin}}`);
+  this.set('spin', true);
+  this.render(hbs`{{paper-icon spin=spin}}`);
 
-    var $component = this.$('md-icon');
+  var $component = this.$('md-icon');
 
-    assert.ok($component.hasClass('md-spin'));
+  assert.ok($component.hasClass('md-spin'));
 
-    this.set('spin', false);
-    assert.notOk($component.hasClass('md-spin'));
+  this.set('spin', false);
+  assert.notOk($component.hasClass('md-spin'));
 });
 
 test('it renders with reverse spin class', function(assert) {
-    assert.expect(2);
+  assert.expect(2);
 
-    this.set('reverseSpin', true);
-    this.render(hbs`{{paper-icon reverseSpin=reverseSpin}}`);
+  this.set('reverseSpin', true);
+  this.render(hbs`{{paper-icon reverseSpin=reverseSpin}}`);
 
-    var $component = this.$('md-icon');
+  var $component = this.$('md-icon');
 
-    assert.ok($component.hasClass('md-spin-reverse'));
+  assert.ok($component.hasClass('md-spin-reverse'));
 
-    this.set('reverseSpin', false);
-    assert.notOk($component.hasClass('md-spin-reverse'));
+  this.set('reverseSpin', false);
+  assert.notOk($component.hasClass('md-spin-reverse'));
 });
 
 test('it renders with size class', function(assert) {
-    assert.expect(6);
+  assert.expect(6);
 
-    this.set('size', 'lg');
-    this.render(hbs`{{paper-icon size=size}}`);
+  this.set('size', 'lg');
+  this.render(hbs`{{paper-icon size=size}}`);
 
-    var $component = this.$('md-icon');
+  var $component = this.$('md-icon');
 
-    assert.ok($component.hasClass('md-lg'));
+  assert.ok($component.hasClass('md-lg'));
 
-    this.set('size', 'sm');
-    assert.ok($component.hasClass('md-sm'));
+  this.set('size', 'sm');
+  assert.ok($component.hasClass('md-sm'));
 
-    this.set('size', 2);
-    assert.ok($component.hasClass('md-2x'));
+  this.set('size', 2);
+  assert.ok($component.hasClass('md-2x'));
 
-    this.set('size', 3);
-    assert.ok($component.hasClass('md-3x'));
+  this.set('size', 3);
+  assert.ok($component.hasClass('md-3x'));
 
-    this.set('size', 4);
-    assert.ok($component.hasClass('md-4x'));
+  this.set('size', 4);
+  assert.ok($component.hasClass('md-4x'));
 
-    this.set('size', 5);
-    assert.ok($component.hasClass('md-5x'));
+  this.set('size', 5);
+  assert.ok($component.hasClass('md-5x'));
+});
+
+test('it works with positional icon param', function(assert) {
+  assert.expect(3);
+
+  this.render(hbs`{{paper-icon "foo"}}`);
+  assert.ok(this.$('md-icon').hasClass('foo'));
+
+  this.render(hbs`{{paper-icon "bar"}}`);
+  assert.ok(this.$('md-icon').hasClass('bar'));
+  assert.notOk(this.$('md-icon').hasClass('foo'));
 });