diff --git a/addon/components/paper-checkbox.js b/addon/components/paper-checkbox.js
index 50af5c3ae..86acc469e 100644
--- a/addon/components/paper-checkbox.js
+++ b/addon/components/paper-checkbox.js
@@ -55,7 +55,7 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, {
   init() {
     this._super(...arguments);
     assert(
-      '{{paper-checkbox}} requires an `onChange` action or null for no action.',
+      '<PaperCheckbox /> requires an `onChange` action or null for no action.',
       this.onChange !== undefined
     );
   },
diff --git a/addon/components/paper-chips/template.hbs b/addon/components/paper-chips/template.hbs
index 0cfde98f2..53c83f23d 100644
--- a/addon/components/paper-chips/template.hbs
+++ b/addon/components/paper-chips/template.hbs
@@ -30,7 +30,7 @@
               aria-hidden="true"
               tabindex="-1"
               {{on "click" (fn this.handleRemoveItem item)}}>
-              <PaperIcon @icon="clear" @size={{18}}/>
+              <PaperIcon @icon="clear" @size={{18}} />
               <span class="md-visually-hidden">Remove</span>
             </button>
           {{/unless}}
diff --git a/addon/components/paper-input.js b/addon/components/paper-input.js
index c4c8d0587..256d9e300 100644
--- a/addon/components/paper-input.js
+++ b/addon/components/paper-input.js
@@ -92,7 +92,7 @@ export default Component.extend(
     didReceiveAttrs() {
       this._super(...arguments);
       assert(
-        '{{paper-input}} requires an `onChange` action or null for no action.',
+        '<PaperInput /> requires an `onChange` action or null for no action.',
         this.onChange !== undefined
       );
 
diff --git a/addon/components/paper-radio-base.js b/addon/components/paper-radio-base.js
index f27e928d4..8f645ca84 100644
--- a/addon/components/paper-radio-base.js
+++ b/addon/components/paper-radio-base.js
@@ -37,7 +37,7 @@ export default Component.extend(FocusableMixin, ColorMixin, {
   // Lifecycle hooks
   init() {
     assert(
-      '{{paper-radio}} requires an `onChange` action or null for no action.',
+      '<PaperRadio /> requires an `onChange` action or null for no action.',
       this.onChange !== undefined
     );
     this._super(...arguments);
diff --git a/addon/components/paper-radio-group.js b/addon/components/paper-radio-group.js
index 0f61abf9b..79be11810 100644
--- a/addon/components/paper-radio-group.js
+++ b/addon/components/paper-radio-group.js
@@ -34,7 +34,7 @@ export default Component.extend(FocusableMixin, ParentMixin, {
   init() {
     this._super(...arguments);
     assert(
-      '{{paper-radio-group}} requires an `onChange` action or null for no action',
+      '<PaperRadioGroup /> requires an `onChange` action or null for no action',
       this.onChange !== undefined
     );
   },
diff --git a/addon/components/paper-switch.js b/addon/components/paper-switch.js
index 0226d831f..041a47285 100644
--- a/addon/components/paper-switch.js
+++ b/addon/components/paper-switch.js
@@ -57,7 +57,7 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, {
   init() {
     this._super(...arguments);
     assert(
-      '{{paper-switch}} requires an `onChange` action or null for no action.',
+      '<PaperSwitch /> requires an `onChange` action or null for no action.',
       this.onChange !== undefined
     );
   },
diff --git a/addon/components/paper-tabs.hbs b/addon/components/paper-tabs.hbs
index cf2d7c442..094589e15 100644
--- a/addon/components/paper-tabs.hbs
+++ b/addon/components/paper-tabs.hbs
@@ -3,10 +3,10 @@
 
   {{#if shouldPaginate}}
     <md-prev-button role="button" class={{unless canPageBack "md-disabled"}} onclick={{action "previousPage"}}>
-      {{paper-icon "keyboard-arrow-left"}}
+      <PaperIcon @icon=keyboard-arrow-left />
     </md-prev-button>
     <md-next-button role="button" class={{unless canPageForward "md-disabled"}} onclick={{action "nextPage"}}>
-      {{paper-icon "keyboard-arrow-left"}}
+      <PaperIcon @icon="keyboard-arrow-left" />
     </md-next-button>
   {{/if}}
 
diff --git a/tests/dummy/app/templates/addons.hbs b/tests/dummy/app/templates/addons.hbs
index 0e11c3d75..c9365c424 100644
--- a/tests/dummy/app/templates/addons.hbs
+++ b/tests/dummy/app/templates/addons.hbs
@@ -148,7 +148,7 @@
           <div class="md-list-item-text">
             <h3><a href="https://github.com/Subtletree/ember-paper-link">ember-paper-link</a></h3>
             <p>
-              A <code>link-to</code> component with <code>paper-button</code> styling that handles active route state and query params.
+              A <code>{{"<LinkTo>"}}</code> component with <code>{{"<PaperButton>"}}</code> styling that handles active route state and query params.
             </p>
           </div>
         </PaperItem>
diff --git a/tests/dummy/app/templates/components/example-item.hbs b/tests/dummy/app/templates/components/example-item.hbs
index 930b3e879..21d2b0074 100644
--- a/tests/dummy/app/templates/components/example-item.hbs
+++ b/tests/dummy/app/templates/components/example-item.hbs
@@ -2,7 +2,7 @@
 {{! BEGIN-SNIPPET autocomplete.example-item }}
 {{! app/templates/components/example-item.hbs }}
 <span class="item-title">
-  {{paper-icon "star"}}
+  <PaperIcon @icon="star" />
   <span><PaperAutocompleteHighlight @searchText={{searchText}} @label={{item}} /> (index {{index}} )</span>
 </span>
 {{! END-SNIPPET }}
diff --git a/tests/dummy/app/templates/components/menu-item.hbs b/tests/dummy/app/templates/components/menu-item.hbs
index a05c510c8..e2f85c1cc 100644
--- a/tests/dummy/app/templates/components/menu-item.hbs
+++ b/tests/dummy/app/templates/components/menu-item.hbs
@@ -2,6 +2,6 @@
 <PaperItem @onClick={{onClick}} @href={{href}} @class={{concat "menu-item" (if active " active") (if expanded " expanded")}}>
   {{yield}}
   {{#if canExpand}}
-    {{paper-icon "expand-more" class="expand-icon"}}
+    <PaperIcon @icon="expand-more" @class="expand-icon" />
   {{/if}}
 </PaperItem>
\ No newline at end of file
diff --git a/tests/dummy/app/templates/components/page-toolbar.hbs b/tests/dummy/app/templates/components/page-toolbar.hbs
index 86f5f6fc7..56ec1117f 100644
--- a/tests/dummy/app/templates/components/page-toolbar.hbs
+++ b/tests/dummy/app/templates/components/page-toolbar.hbs
@@ -3,19 +3,19 @@
   <toolbar.tools>
     <PaperSidenavToggle as |toggleAction|>
       <PaperButton @class="hide-gt-sm" @onClick={{action toggleAction}} @iconButton={{true}}>
-        {{paper-icon "menu"}}
+        <PaperIcon @icon="menu" />
       </PaperButton>
     </PaperSidenavToggle>
     <div class="layout-row flex">
       <h2>
         {{#if isDemo}}
-          Components {{paper-icon "chevron-right"}}
+          Components <PaperIcon @icon="chevron-right" />
         {{else if isLayout}}
-          Layout {{paper-icon "chevron-right"}}
+          Layout <PaperIcon @icon="chevron-right" />
         {{/if}}
         {{pageTitle}}
         {{#if isWIP}}
-          {{paper-icon "warning" title="Not updated yet."}}
+          <PaperIcon @icon="warning" @title="Not updated yet." />
         {{/if}}
       </h2>
 
diff --git a/tests/dummy/app/templates/cookbook.hbs b/tests/dummy/app/templates/cookbook.hbs
index 6540f8860..973f81613 100644
--- a/tests/dummy/app/templates/cookbook.hbs
+++ b/tests/dummy/app/templates/cookbook.hbs
@@ -2,7 +2,7 @@
 
 <PaperContent @class="md-padding">
   <div class="doc-content">
-    <h3>Hiding the <code>\{{paper-input}}</code> character counts</h3>
+    <h3>Hiding the <code>{{"<PaperInput>"}}</code> character counts</h3>
     <p>
       Material Design <a href="https://material.google.com/components/text-fields.html#text-fields-character-counter">requires that a character count is displayed</a> for input elements which have a length restriction. However, when forms have many input elements, some may prefer to display the count only when the element is focused or invalid. This CSS achieves this.
     </p>
diff --git a/tests/dummy/app/templates/demo/autocomplete.hbs b/tests/dummy/app/templates/demo/autocomplete.hbs
index ebb57a335..f5cf3af9d 100644
--- a/tests/dummy/app/templates/demo/autocomplete.hbs
+++ b/tests/dummy/app/templates/demo/autocomplete.hbs
@@ -6,7 +6,7 @@
   <PaperCard>
     <PaperCardContent>
       <h2>Basic Usage</h2>
-      <blockquote>Use <code>\{{paper-autocomplete}}</code> to search for matches from local or remote data sources.</blockquote>
+      <blockquote>Use <code>{{"<PaperAutocomplete>"}}</code> to search for matches from local or remote data sources.</blockquote>
       <form>
         {{! BEGIN-SNIPPET autocomplete.basic-usage }}
         <PaperAutocomplete @disabled={{firstDisabled}} @onCreate={{action "addCountry"}} @options={{items}} @allowClear={{true}} @defaultHighlighted={{if enableDefaultHighlighted highlightFirstMatch}} @searchText={{readonly countrySearchText}} @onSearchTextChange={{action (mut countrySearchText)}} @selected={{selectedCountry}} @search={{if simulateQuery (action "searchCountries")}} @searchField="name" @labelPath="name" @placeholder="Select a Country..." @noMatchesMessage="Oops this country doesn't exist. Create a new country?" @onSelectionChange={{action (mut selectedCountry)}} />
@@ -47,27 +47,25 @@
   <PaperCard>
     <PaperCardContent>
       <h2>Block Custom template</h2>
-      <blockquote>Use <code>\{{paper-autocomplete}}</code> with custom templates to show styled autocomplete results.</blockquote>
+      <blockquote>Use <code>{{"<PaperAutocomplete>"}}</code> with custom templates to show styled autocomplete results.</blockquote>
 
       {{!-- searchText=(readonly templateSeachText) --}}
 
       <form>
         {{! BEGIN-SNIPPET autocomplete.block-custom-template }}
-        {{#paper-autocomplete
-          placeholder="Type e.g. ember, paper, one, two etc."
-          options=arrayOfItems
-          selected=selectedItem
-          onSelectionChange=(action (mut selectedItem))
-          as |item term|}}
+        <PaperAutocomplete
+          @placeholder="Type e.g. ember, paper, one, two etc."
+          @options={{arrayOfItems}}
+          @selected={{selectedItem}}
+          @onSelectionChange={{action (mut selectedItem)}}
+        as |item term|>
           <span class="item-title">
-            {{paper-icon "star"}}
+            <PaperIcon @icon="star" />
             <span>
               <PaperAutocompleteHighlight @searchText={{term.searchText}} @flags="i" @label={{item}} />
             </span>
           </span>
-        {{else}}
-          Whoops! could not find!
-        {{/paper-autocomplete}}
+        </PaperAutocomplete>
         {{! END-SNIPPET }}
       </form>
 
diff --git a/tests/dummy/app/templates/demo/button.hbs b/tests/dummy/app/templates/demo/button.hbs
index 25109b48d..3907e9833 100644
--- a/tests/dummy/app/templates/demo/button.hbs
+++ b/tests/dummy/app/templates/demo/button.hbs
@@ -31,7 +31,7 @@
     <PaperButton @raised={{true}} @fab={{true}} @accent={{true}}>Fab</PaperButton>
     <PaperButton @raised={{true}} @mini={{true}}>Mini</PaperButton>
     <PaperButton @raised={{true}} @mini={{true}} @primary={{true}}>Mini</PaperButton>
-    <PaperButton @iconButton={{true}}>{{paper-icon "accessibility"}}</PaperButton>
+    <PaperButton @iconButton={{true}}><PaperIcon @icon="accessibility" /></PaperButton>
   </p>
 
   <p>
diff --git a/tests/dummy/app/templates/demo/card.hbs b/tests/dummy/app/templates/demo/card.hbs
index 3afe61f46..08bf4e63f 100644
--- a/tests/dummy/app/templates/demo/card.hbs
+++ b/tests/dummy/app/templates/demo/card.hbs
@@ -31,9 +31,9 @@
             <div class="card-media"></div>
           </card.media>
           <card.actions @class="layout-column">
-            <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-            <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
-            <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="favorite" /></PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="settings" /></PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="share" /></PaperButton>
           </card.actions>
         </card.content>
       </PaperCard>
@@ -141,18 +141,18 @@
           </p>
         </card.content>
         <card.actions>
-          <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="favorite" /></PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="settings" /></PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="share" /></PaperButton>
         </card.actions>
       </PaperCard>
 
       <PaperCard as |card|>
         <card.image @src="washedout.png" @alt="Washed Out" @title="Washed Out" />
         <card.actions>
-          <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="favorite" /></PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="settings" /></PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="share" /></PaperButton>
         </card.actions>
       </PaperCard>
 
@@ -199,8 +199,8 @@
         </card.title>
         <card.actions @class="layout-row layout-align-start-center" as |actions|>
           <actions.icons>
-            <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-            <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="favorite" /></PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="share" /></PaperButton>
           </actions.icons>
           <PaperButton>Action 1</PaperButton>
           <PaperButton>Action 2</PaperButton>
@@ -234,7 +234,7 @@
           <PaperButton>Action 1</PaperButton>
           <PaperButton>Action 2</PaperButton>
           <actions.icons>
-            <PaperButton @iconButton={{true}}>{{paper-icon "expand-less"}}</PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="expand-less" /></PaperButton>
           </actions.icons>
         </card.actions>
         <card.content>
diff --git a/tests/dummy/app/templates/demo/chips.hbs b/tests/dummy/app/templates/demo/chips.hbs
index 7c0f60a22..dc96cab60 100644
--- a/tests/dummy/app/templates/demo/chips.hbs
+++ b/tests/dummy/app/templates/demo/chips.hbs
@@ -52,7 +52,7 @@
       <PaperContactChips @readOnly={{readOnly}} @removeItem={{action "removeContact"}} @addItem={{action "addContact"}} @placeholder="Add a contact" @content={{selectedContacts}} @options={{remainingContacts}} />
 
       <blockquote>
-        <code>paper-contact-chips</code> expects the name, email address and image
+        <code>{{"<PaperContactChips>"}}</code> expects the name, email address and image
         to be supplied as <code>name</code>, <code>email</code> and <code>image</code>
         respectively. If your field names differ from these, specify them using the
         <code>nameField</code>, <code>emailField</code> and <code>imageField</code>
diff --git a/tests/dummy/app/templates/demo/dialog.hbs b/tests/dummy/app/templates/demo/dialog.hbs
index e05cd42c7..01d7360da 100644
--- a/tests/dummy/app/templates/demo/dialog.hbs
+++ b/tests/dummy/app/templates/demo/dialog.hbs
@@ -51,7 +51,7 @@
             (p-row "fullscreen" "boolean" "Causes the dialog to become fullscreen at smaller breakpoints.")
             (p-row "opaque" "boolean" "Causes the backdrop to become opaque. Defaults to `true`.")
             (p-row "clickOutsideToClose" "boolean" "Causes clicking on the backdrop to trigger the `onClose` handler. Defaults to `false`.")
-            (p-row "focusOnOpen" "boolean" "Causes the initial focus to be on an inner element with the autofocus attribute, rather than the last button inside `{{paper-dialog-actions}}`. Defaults to `true`.")
+            (p-row "focusOnOpen" "boolean" "Causes the initial focus to be on an inner element with the autofocus attribute, rather than the last button inside `<PaperDialogActions />`. Defaults to `true`.")
             (p-row "escapeToClose" "boolean" "Causes pressing escape to close the dialog. Defaults to `true`.")
           )
           (p-section
diff --git a/tests/dummy/app/templates/demo/icons.hbs b/tests/dummy/app/templates/demo/icons.hbs
index 13f98777f..f101d022d 100644
--- a/tests/dummy/app/templates/demo/icons.hbs
+++ b/tests/dummy/app/templates/demo/icons.hbs
@@ -14,7 +14,7 @@
   <h3>Basic Icons</h3>
   <div>
     {{! BEGIN-SNIPPET icons.basic-usage }}
-    {{paper-icon "check-circle"}}
+    <PaperIcon @icon="check-circle" />
     {{! END-SNIPPET }}
   </div>
   <CodeSnippet @name="icons.basic-usage.hbs" />
@@ -22,11 +22,11 @@
   <h3>Changing Sizes</h3>
   <div class="layout-row">
     {{! BEGIN-SNIPPET icons.sizes }}
-    {{paper-icon "check-circle" size=12}}
-    {{paper-icon "check-circle" size=18}}
-    {{paper-icon "check-circle" size=24}}
-    {{paper-icon "check-circle" size=36}}
-    {{paper-icon "check-circle" size=48}}
+    <PaperIcon @icon="check-circle" @size={{12}} />
+    <PaperIcon @icon="check-circle" @size={{18}} />
+    <PaperIcon @icon="check-circle" @size={{24}} />
+    <PaperIcon @icon="check-circle" @size={{36}} />
+    <PaperIcon @icon="check-circle" @size={{48}} />
     {{! END-SNIPPET }}
   </div>
   <CodeSnippet @name="icons.sizes.hbs" />
@@ -34,8 +34,8 @@
   <h3>Spinners</h3>
   <div>
     {{! BEGIN-SNIPPET icons.spinners }}
-    {{paper-icon "rotate-right" spin=true}}
-    {{paper-icon "rotate-left" reverseSpin=true}}
+    <PaperIcon @icon="rotate-right" @spin={{true}} />
+    <PaperIcon @icon="rotate-left" @reverseSpin={{true}} />
     {{! END-SNIPPET }}
   </div>
   <CodeSnippet @name="icons.spinners.hbs" />
diff --git a/tests/dummy/app/templates/demo/input.hbs b/tests/dummy/app/templates/demo/input.hbs
index 10478abc5..ba42cf824 100644
--- a/tests/dummy/app/templates/demo/input.hbs
+++ b/tests/dummy/app/templates/demo/input.hbs
@@ -202,13 +202,13 @@
 
   <h2>Setting validation messages from external validations</h2>
   <p>
-    While <code>\{{paper-input}}</code> supplies four
+    While <code>{{"<PaperInput>"}}</code> supplies four
     built-in validation rules and the ability to specify programmed custom
     validations, some projects need more complicated and elaborate validations,
     such as are provided by <code>ember-cp-validations</code> or another validation add-on.
     In this case, the code to validate the user input is outside of
-    <code>paper-input</code>, and only the resulting messages need be provided to the
-    <code>\{{paper-input}}</code> helper.
+    <code>{{"<PaperInput>"}}</code>, and only the resulting messages need be provided to the
+    <code>{{"<PaperInput>"}}</code> helper.
   </p>
   {{! BEGIN-SNIPPET input.external-validations }}
   <PaperCard as |card|>
diff --git a/tests/dummy/app/templates/demo/list.hbs b/tests/dummy/app/templates/demo/list.hbs
index 87a122835..ed476e513 100644
--- a/tests/dummy/app/templates/demo/list.hbs
+++ b/tests/dummy/app/templates/demo/list.hbs
@@ -59,7 +59,7 @@
         <PaperSubheader>Icons</PaperSubheader>
         {{#each phoneNumbers as |phone|}}
           <PaperItem @class="md-2-line">
-            {{paper-icon "phone" class="md-avatar-icon"}}
+            <PaperIcon @icon="phone" @class="md-avatar-icon" />
             <div class="md-list-item-text">
               <h3>{{phone.number}}</h3>
               <p>{{phone.type}}</p>
@@ -119,21 +119,21 @@
 
         <PaperSubheader>Clickable Items with Secondary Controls</PaperSubheader>
         <PaperItem @onClick={{action "transitionToWifiMenu"}} as |controls|>
-          {{paper-icon "network-wifi"}}
+          <PaperIcon @icon="network-wifi" />
           <p>Wi-Fi</p>
           <div class="md-secondary-container">
             <controls.switch @secondary={{true}} @value={{wifiEnabled}} @onChange={{action (mut wifiEnabled)}} />
           </div>
         </PaperItem>
         <PaperItem @onClick={{action "transitionToBluetoothMenu"}} as |controls|>
-          {{paper-icon "bluetooth"}}
+          <PaperIcon @icon="bluetooth" />
           <p>Bluetooth</p>
           <div class="md-secondary-container">
             <controls.switch @secondary={{true}} @value={{bluetoothEnabled}} @onChange={{action (mut bluetoothEnabled)}} />
           </div>
         </PaperItem>
         <PaperItem @onClick={{action "transitionToDataUsage"}}>
-          {{paper-icon "data-usage"}}
+          <PaperIcon @icon="data-usage" />
           <p>Data Usage</p>
         </PaperItem>
 
@@ -146,7 +146,7 @@
             <p>{{item.message}}</p>
             <div class="md-secondary-container">
               <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
-                {{paper-icon "message"}}
+                <PaperIcon @icon="message" />
               </controls.button>
             </div>
           </PaperItem>
@@ -162,10 +162,10 @@
             <div class="md-secondary-container">
               <controls.checkbox @value={{item.checked}} @onChange={{action (mut item.checked)}} />
               <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
-                {{paper-icon "email"}}
+                <PaperIcon @icon="email" />
               </controls.button>
               <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
-                {{paper-icon "message"}}
+                <PaperIcon @icon="message" />
               </controls.button>
             </div>
           </PaperItem>
@@ -197,7 +197,7 @@
               <p>Some notes here.</p>
             </div>
             <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryPersonClick" item}}>
-              {{paper-icon "phone"}}
+              <PaperIcon @icon="phone" />
             </controls.button>
           </PaperItem>
         {{/each}}
diff --git a/tests/dummy/app/templates/demo/menu.hbs b/tests/dummy/app/templates/demo/menu.hbs
index 5777c34c5..56b9d2f82 100644
--- a/tests/dummy/app/templates/demo/menu.hbs
+++ b/tests/dummy/app/templates/demo/menu.hbs
@@ -24,20 +24,20 @@
 
           <menu.trigger>
             <PaperButton @iconButton={{true}}>
-              {{paper-icon "local_phone"}}
+              <PaperIcon @icon="local_phone" />
             </PaperButton>
           </menu.trigger>
 
           <menu.content @width={{4}} as |content|>
             {{#each items as |item|}}
               <content.menu-item @onClick={{action this.openSomething}}>
-                {{paper-icon item.icon}}
+                <PaperIcon @icon={{item.icon}} />
                 <span>{{item.title}}</span>
               </content.menu-item>
             {{/each}}
 
             <content.menu-item @onClick={{action this.openSomething}} @disabled={{true}}>
-              {{paper-icon "adb"}}
+              <PaperIcon @icon="adb" />
               <span>This is disabled.</span>
             </content.menu-item>
 
@@ -45,7 +45,7 @@
 
             {{#each items as |item|}}
               <content.menu-item @onClick={{action this.openSomething}}>
-                {{paper-icon item.icon}} {{item.title}}
+                <PaperIcon @icon={{item.icon}} /> {{item.title}}
               </content.menu-item>
             {{/each}}
           </menu.content>
@@ -77,14 +77,14 @@
             <PaperMenu @isOpen={{menuTwoIsOpen}} as |menu|>
               <menu.trigger>
                 <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
+                  <PaperIcon @icon="local_phone" @class="md-menu-origin" />
                 </PaperButton>
               </menu.trigger>
 
               <menu.content as |content|>
                 {{#each items as |item|}}
                   <content.menu-item @onClick={{action this.openSomething}}>
-                    {{paper-icon item.icon class="md-menu-align-target"}}
+                    <PaperIcon @icon={{item.icon}} @class="md-menu-align-target" />
                     <span>{{item.title}}</span>
                   </content.menu-item>
                 {{/each}}
@@ -98,14 +98,14 @@
             <PaperMenu @isOpen={{menuThreeIsOpen}} @offset="0 50" as |menu|>
               <menu.trigger>
                 <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
+                  <PaperIcon @icon="local_phone" @class="md-menu-origin" />
                 </PaperButton>
               </menu.trigger>
 
               <menu.content as |content|>
                 {{#each items as |item|}}
                   <content.menu-item @onClick={{action this.openSomething}}>
-                    {{paper-icon item.icon class="md-menu-align-target"}}
+                    <PaperIcon @icon={{item.icon}} @class="md-menu-align-target" />
                     <span>{{item.title}}</span>
                   </content.menu-item>
                 {{/each}}
@@ -118,7 +118,7 @@
             <PaperMenu @isOpen={{menuFourIsOpen}} @position="target-right target" as |menu|>
               <menu.trigger>
                 <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
+                  <PaperIcon @icon="local_phone" @class="md-menu-origin" />
                 </PaperButton>
               </menu.trigger>
 
@@ -126,19 +126,19 @@
                 {{#each items as |item|}}
                   <content.menu-item @onClick={{action this.openSomething}}>
                     <p style="width: 190px;">{{item.title}}</p>
-                    {{paper-icon item.icon class="md-menu-align-target"}}
+                    <PaperIcon @icon={{item.icon}} @class="md-menu-align-target" />
                   </content.menu-item>
                 {{/each}}
                 {{#each items as |item|}}
                   <content.menu-item @onClick={{action this.openSomething}}>
                     <p style="width: 190px;">{{item.title}}</p>
-                    {{paper-icon item.icon class="md-menu-align-target"}}
+                    <PaperIcon @icon={{item.icon}} @class="md-menu-align-target" />
                   </content.menu-item>
                 {{/each}}
                 {{#each items as |item|}}
                   <content.menu-item @onClick={{action this.openSomething}}>
                     <p style="width: 190px;">{{item.title}}</p>
-                    {{paper-icon item.icon class="md-menu-align-target"}}
+                    <PaperIcon @icon={{item.icon}} @class="md-menu-align-target" />
                   </content.menu-item>
                 {{/each}}
               </menu.content>
@@ -181,7 +181,7 @@
             <PaperMenu as |menu|>
               <menu.trigger>
                 <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
+                  <PaperIcon @icon="local_phone" @class="md-menu-origin" />
                 </PaperButton>
               </menu.trigger>
 
@@ -200,7 +200,7 @@
             <PaperMenu as |menu|>
               <menu.trigger>
                 <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
+                  <PaperIcon @icon="local_phone" @class="md-menu-origin" />
                 </PaperButton>
               </menu.trigger>
 
@@ -219,7 +219,7 @@
             <PaperMenu as |menu|>
               <menu.trigger>
                 <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
+                  <PaperIcon @icon="local_phone" @class="md-menu-origin" />
                 </PaperButton>
               </menu.trigger>
 
@@ -260,7 +260,7 @@
             <PaperMenu as |menu|>
               <menu.trigger>
                 <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
+                  <PaperIcon @icon="local_phone" @class="md-menu-origin" />
                 </PaperButton>
               </menu.trigger>
 
diff --git a/tests/dummy/app/templates/demo/sidenav.hbs b/tests/dummy/app/templates/demo/sidenav.hbs
index 8a3e9de9b..ba41023d6 100644
--- a/tests/dummy/app/templates/demo/sidenav.hbs
+++ b/tests/dummy/app/templates/demo/sidenav.hbs
@@ -35,7 +35,7 @@
           <div class="layout-fill layout-align-start-center layout-column" style="height: 500px">
             <p>
               The left sidenav will "lock open" on a medium (>=960px wide) device.
-              The right sidenav never "locks open" because we set <code>lockedOpen=false</code>.
+              The right sidenav never "locks open" because we set <code>@lockedOpen={{false}}</code>.
             </p>
             <p>
               Left sidenav is <strong>{{if leftSideBarOpen "opened" "closed"}}</strong>.
@@ -80,7 +80,7 @@
         <h2>Persistent Sidenav</h2>
         <span class="flex"></span>
         <PaperButton @onClick={{action "toggle" "persistentCode"}} @iconButton={{true}}>
-          {{paper-icon "code"}}
+          <PaperIcon @icon="code" />
         </PaperButton>
       </toolbar.tools>
     </PaperToolbar>
@@ -105,7 +105,7 @@
         <PaperCardContent @class="flex">
           <div class="layout-fill layout-align-start-center layout-column" style="height: 500px">
             <p>
-              Another way of using the sidenav is to toggle the <code>lockedOpen</code> state.
+              Another way of using the sidenav is to toggle the <code>@lockedOpen</code> state.
               This corresponds to the "persistent sidenav" pattern in the material spec.
             </p>
             <p>
diff --git a/tests/dummy/app/templates/demo/speed-dial.hbs b/tests/dummy/app/templates/demo/speed-dial.hbs
index 3d35d7f25..9075e5d66 100644
--- a/tests/dummy/app/templates/demo/speed-dial.hbs
+++ b/tests/dummy/app/templates/demo/speed-dial.hbs
@@ -9,7 +9,7 @@
           <h2>Basic Usage</h2>
           <span class="flex"></span>
           <PaperButton @onClick={{action "toggle" "showBasicUsageSourceCode"}} @iconButton={{true}}>
-            {{paper-icon "code"}}
+            <PaperIcon @icon="code" />
           </PaperButton>
         </PaperToolbarTools>
       </PaperToolbar>
@@ -25,26 +25,26 @@
             <PaperSpeedDial @animation={{animation}} @direction={{direction}} @open={{open}} @onToggle={{action (mut open)}} as |dial|>
               <dial.trigger>
                 <PaperButton @fab={{true}}>
-                  {{paper-icon "menu"}}
+                  <PaperIcon @icon="menu" />
                 </PaperButton>
               </dial.trigger>
 
               <dial.actions as |actions|>
                 <actions.action>
                   <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "people"}}
+                    <PaperIcon @icon="people" />
                   </PaperButton>
                 </actions.action>
 
                 <actions.action>
                   <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "accessibility"}}
+                    <PaperIcon @icon="accessibility" />
                   </PaperButton>
                 </actions.action>
 
                 <actions.action>
                   <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "check-circle"}}
+                    <PaperIcon @icon="check-circle" />
                   </PaperButton>
                 </actions.action>
               </dial.actions>
@@ -97,7 +97,7 @@
         </p>
         <p>
           The component can also take a <code>open</code> attribute and an <code>onToggle</code> pair, much like
-          <code>paper-sidenav</code>. Use the pair to control the open status of the speed dial.
+          <code>{{"<PaperSidenav>"}}</code>. Use the pair to control the open status of the speed dial.
         </p>
       </PaperCardContent>
     </PaperCard>
@@ -110,7 +110,7 @@
           <h2>Advanced Usage</h2>
           <span class="flex"></span>
           <PaperButton @onClick={{action "toggle" "showAdvancedUsageSourceCode"}} @iconButton={{true}}>
-            {{paper-icon "code"}}
+            <PaperIcon @icon="code" />
           </PaperButton>
         </PaperToolbarTools>
       </PaperToolbar>
@@ -126,26 +126,26 @@
             <PaperSpeedDial @onMouseEnter={{action (mut open2) true}} @onMouseLeave={{action (mut open2) false}} @open={{open2}} @onToggle={{action (mut open2)}} @hoverFull={{hoverFull}} as |dial|>
               <dial.trigger>
                 <PaperButton @fab={{true}}>
-                  {{paper-icon "menu"}}
+                  <PaperIcon @icon="menu" />
                 </PaperButton>
               </dial.trigger>
 
               <dial.actions as |actions|>
                 <actions.action>
                   <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "people"}}
+                    <PaperIcon @icon="people" />
                   </PaperButton>
                 </actions.action>
 
                 <actions.action>
                   <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "accessibility"}}
+                    <PaperIcon @icon="accessibility" />
                   </PaperButton>
                 </actions.action>
 
                 <actions.action>
                   <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "check-circle"}}
+                    <PaperIcon @icon="check-circle" />
                   </PaperButton>
                 </actions.action>
               </dial.actions>
diff --git a/tests/dummy/app/templates/demo/tabs.hbs b/tests/dummy/app/templates/demo/tabs.hbs
index a9296ab55..39312ee76 100644
--- a/tests/dummy/app/templates/demo/tabs.hbs
+++ b/tests/dummy/app/templates/demo/tabs.hbs
@@ -80,7 +80,7 @@
         </p>
         <p>
           To reinforce this idea, each of the tabs optionally accepts a <code>value</code>
-          property which needs to match the <code>paper-tabs</code> <code>selected</code>
+          property which needs to match the <code>{{"<PaperTabs>"}}</code> <code>selected</code>
           property (see API table below for more info). You don't need to use the value property,
           though. Each tab is automatically given a value equal to its index. So, your <code>onChange</code>
           action will start getting integer values if you don't specify any value on the tabs.
@@ -106,7 +106,7 @@
           <h2>Dynamic Usage</h2>
           <span class="flex"></span>
           <PaperButton @onClick={{action "toggle" "showDynamicUsageSourceCode"}} @iconButton={{true}}>
-            {{paper-icon "code"}}
+            <PaperIcon @icon="code" />
           </PaperButton>
         </PaperToolbarTools>
       </PaperToolbar>
@@ -212,13 +212,13 @@
         <p>
           <em>
             <b>Hint:</b> use <code>ember-href-to</code> addon to easily generate
-            urls for your routes. It plays really well with <code>paper-tabs</code>,
-            <code>paper-buttons</code> and even <code>paper-item</code>s.
+            urls for your routes. It plays really well with <code>{{"<PaperTabs>"}}</code>,
+            <code>{{"<PaperButton>"}}</code>s and even <code>{{"<PaperItem>"}}</code>s.
           </em>
         </p>
         <p>
           <b>Hint:</b> for Ember versions less than 2.15, use the <code>ember-router-service-polyfill</code> addon to easily retrieve
-          the current route name and use it as the selected value to <code>paper-tabs</code>.
+          the current route name and use it as the selected value to <code>{{"<PaperTabs>"}}</code>.
         </p>
       </PaperCardContent>
     </PaperCard>
diff --git a/tests/dummy/app/templates/demo/toast.hbs b/tests/dummy/app/templates/demo/toast.hbs
index b8dedef6e..4f43fea9e 100644
--- a/tests/dummy/app/templates/demo/toast.hbs
+++ b/tests/dummy/app/templates/demo/toast.hbs
@@ -62,7 +62,7 @@
 
         <h3>duration</h3>
         <div class="layout layout-align-center-center slider-container">
-          {{paper-icon "watch later"}}
+          <PaperIcon @icon="watch later" />
           <PaperSlider @class="flex" @value={{duration}} @max={{6000}} @onChange={{action (mut duration)}} />
           <PaperInput @type="number" @value={{duration}} @onChange={{action (mut duration)}} />
         </div>
@@ -105,7 +105,7 @@
     <div class="doc-content-example">
       <PaperCardContent>
 
-        <p>Open a toast via <code>paperToaster</code> service and <code>\{{paper-toaster}}</code> component.</p>
+        <p>Open a toast via <code>paperToaster</code> service and <code>{{"<PaperToaster>"}}</code> component.</p>
 
         <h3>Options</h3>
 
diff --git a/tests/dummy/app/templates/demo/toolbar.hbs b/tests/dummy/app/templates/demo/toolbar.hbs
index ff186d0e8..f6d4b8d95 100644
--- a/tests/dummy/app/templates/demo/toolbar.hbs
+++ b/tests/dummy/app/templates/demo/toolbar.hbs
@@ -6,17 +6,17 @@
   <PaperToolbar>
     <PaperToolbarTools>
       <PaperButton @iconButton={{true}}>
-        {{paper-icon "menu"}}
+        <PaperIcon @icon="menu" />
       </PaperButton>
       <h2>
         Toolbar with Icon Buttons
       </h2>
       <span class="flex"></span>
       <PaperButton @iconButton={{true}}>
-        {{paper-icon "favorite"}}
+        <PaperIcon @icon="favorite" />
       </PaperButton>
       <PaperButton @iconButton={{true}}>
-        {{paper-icon "more_vert"}}
+        <PaperIcon @icon="more_vert" />
       </PaperButton>
     </PaperToolbarTools>
   </PaperToolbar>
@@ -34,7 +34,7 @@
         Learn More
       </PaperButton>
       <PaperButton @mini={{true}} @aria-label="Favorite">
-        {{paper-icon "favorite"}}
+        <PaperIcon @icon="favorite" />
       </PaperButton>
     </toolbar.tools>
   </PaperToolbar>
diff --git a/tests/dummy/app/templates/demo/tooltip.hbs b/tests/dummy/app/templates/demo/tooltip.hbs
index 6c33588f8..55fe69dd6 100644
--- a/tests/dummy/app/templates/demo/tooltip.hbs
+++ b/tests/dummy/app/templates/demo/tooltip.hbs
@@ -45,25 +45,25 @@
           </PaperButton>
 
           <PaperButton @iconButton={{true}} @raised={{true}}>
-            {{paper-icon "create"}}
+            <PaperIcon @icon="create" />
             <PaperTooltip @position={{position}}>
               Create
             </PaperTooltip>
           </PaperButton>
 
           <PaperButton @fab={{true}} @raised={{true}} @accent={{true}}>
-            {{paper-icon "delete"}}
+            <PaperIcon @icon="delete" />
             <PaperTooltip @position={{position}}>
               Delete
             </PaperTooltip>
           </PaperButton>
 
           <div>
-            {{#paper-icon "info"}}
+            <PaperIcon @icon="info">
               <PaperTooltip @position={{position}}>
                 Icon tooltip
               </PaperTooltip>
-            {{/paper-icon}}
+            </PaperIcon>
           </div>
           {{! END-SNIPPET tooltip }}
         </div>
diff --git a/tests/dummy/app/templates/forms.hbs b/tests/dummy/app/templates/forms.hbs
index b95f89fdd..862ddb016 100644
--- a/tests/dummy/app/templates/forms.hbs
+++ b/tests/dummy/app/templates/forms.hbs
@@ -12,14 +12,14 @@
 
     <PaperCardContent>
       <p>
-        ember-paper provides a <code>paper-form</code> to help you build forms
+        ember-paper provides a <code>{{"<PaperForm>"}}</code> to help you build forms
         and keep track of the form's global validity state. This component uses
         the html form tag by default, so expected form behavior will occur.
         (For example, pressing the enter key from within one of the form's
         inputs will submit the form.)
-        <code>paper-form</code> yields <code><LinkTo @route="demo.input">paper-input</LinkTo></code>,
-        <code><LinkTo @route="demo.select">paper-select</LinkTo></code>
-        and <code><LinkTo @route="demo.autocomplete">paper-autocomplete</LinkTo></code> controls.
+        <code>{{"<PaperForm>"}}</code> yields <code><LinkTo @route="demo.input">{{"<PaperInput>"}}</LinkTo></code>,
+        <code><LinkTo @route="demo.select">{{"<PaperSelect>"}}</LinkTo></code>
+        and <code><LinkTo @route="demo.autocomplete">{{"<PaperAutocomplete>"}}</LinkTo></code> controls.
         In the following example you can see how we use the yielded form controls:
       </p>
 
@@ -61,7 +61,7 @@
       <p>
         A typical use case for the global validity state is to toggle the submit button
         between a disabled and enabled state. Here is how you would do that with
-        <code>paper-form</code>:
+        <code>{{"<PaperForm>"}}</code>:
       </p>
 
       {{! BEGIN-SNIPPET form.disabled-submit }}
@@ -94,7 +94,7 @@
 
       <p>
         If you prefer, you can trigger the submit action without using a submit button.
-        <code>paper-form</code> also yields an <code>onSubmit</code> action you
+        <code>{{"<PaperForm>"}}</code> also yields an <code>onSubmit</code> action you
         can use wherever you like, e.g: <br>
         <pre>
           &lt;button onclick=\{{action form.onSubmit}}&gt;