diff --git a/docs/components/material.md b/docs/components/material.md
index 95baf580cb0..ec9dfe5c3c1 100644
--- a/docs/components/material.md
+++ b/docs/components/material.md
@@ -15,6 +15,7 @@ examples:
     src: https://glitch.com/edit/#!/aframe-displacement-offset-registershader?path=public/index.html
 ---
 
+[amaterial]: ../primitives/a-material.md
 [fog]: ./fog.md
 [geometry]: ./geometry.md
 
@@ -48,6 +49,18 @@ Here is an example of using an example custom material:
           material="shader: ocean; color: blue; wave-height: 10"></a-entity>
 ```
 
+Here is an example of sharing one material instance across entities using a
+[`<a-material>` asset][amaterial]:
+
+```html
+<a-assets>
+  <a-material id="gold" color="#ffc65d" metalness="0.9" roughness="0.2"></a-material>
+</a-assets>
+
+<a-entity geometry="primitive: box" material="material: #gold"></a-entity>
+<a-entity geometry="primitive: sphere" material="material: #gold"></a-entity>
+```
+
 ## Properties
 
 [flat]: #flat
@@ -62,6 +75,7 @@ depending on the material type applied.
 | alphaTest    | Alpha test threshold for transparency.                                                                                                            | 0             |
 | depthTest    | Whether depth testing is enabled when rendering the material.                                                                                     | true          |
 | flatShading  | Use `THREE.FlatShading` rather than `THREE.StandardShading`.                                                                                      | false         |
+| material     | Selector to an [`<a-material>` asset][amaterial] (e.g., `#wood`). When set, all other properties are ignored and the material is entirely defined by the asset. | None          |
 | offset       | Texture offset to be used.                                                                                                                        | {x: 0, y: 0}  |
 | opacity      | Extent of transparency. If the `transparent` property is not `true`, then the material will remain opaque and `opacity` will only affect color.   | 1.0           |
 | premultipliedAlpha | Whether the material's RGB channels are premultiplied by its alpha channel. Automatically forced to `true` when `blending` is `multiply` or `subtractive`.   | false         |
diff --git a/docs/core/asset-management-system.md b/docs/core/asset-management-system.md
index 6ae7f1b6d90..09b5ae1562f 100644
--- a/docs/core/asset-management-system.md
+++ b/docs/core/asset-management-system.md
@@ -21,7 +21,8 @@ scenes don't try to fetch assets while rendering.
 We place assets within `<a-assets>`, and we place `<a-assets>` within
 `<a-scene>`. Assets include:
 
-- `<a-asset-item>` - Miscellaneous assets such as 3D models and materials
+- `<a-asset-item>` - Miscellaneous assets such as 3D models
+- `<a-material>` - Materials and their textures
 - `<audio>` - Sound files
 - `<img>` - Image textures
 - `<video>` - Video textures
diff --git a/docs/core/component.md b/docs/core/component.md
index 9fa83f735e4..3f802329e3d 100644
--- a/docs/core/component.md
+++ b/docs/core/component.md
@@ -150,6 +150,7 @@ types:
 | color           | Currently doesn't do any parsing. Primarily used by the A-Frame Inspector to present a color picker. Also, it is required to use color type for color animations to work.                                                                                                                                                                                                                                                            | #FFF                     |
 | int             | Calls `parseInt` (e.g., `"124.5"` to `124`).                                                                                                                                                                                                                                                                                                                     | 0                        |
 | map             | Same parsing as the `asset` property type. Will possibly be used by the A-Frame Inspector to present texture assets.                                                                                                                                                                                                                                             | ''                       |
+| material        | For material assets. Resolves an ID selector to a `<a-material>` element (e.g., `#gold`) to the underlying shared `THREE.Material` instance. Also accepts an inline definition (e.g., `material(color: red)`) or a `THREE.Material` instance directly.                                                                                                           | null                     |
 | model           | Same parsing as the `asset` property type. Will possibly be used by the A-Frame Inspector to present model assets.                                                                                                                                                                                                                                               | ''                       |
 | number          | Calls `parseFloat` (e.g., `"124.5"` to `124.5`).                                                                                                                                                                                                                                                                                                                  | 0                        |
 | selector        | Calls `querySelector` (e.g., `"#box"` to `<a-entity id="box">`).                                                                                                                                                                                                                                                                                                  | null                     |
diff --git a/docs/primitives/a-material.md b/docs/primitives/a-material.md
new file mode 100644
index 00000000000..5a92e0188cc
--- /dev/null
+++ b/docs/primitives/a-material.md
@@ -0,0 +1,111 @@
+---
+title: <a-material>
+type: primitives
+layout: docs
+parent_section: primitives
+source_code: src/core/a-material.js
+---
+
+[assets]: ../core/asset-management-system.md
+[material]: ../components/material.md
+[shaders]: ../components/material.md#built-in-materials
+
+The material asset element defines a reusable material within the [asset
+management system][assets]. The material (and its textures) is created during
+scene loading and the same `THREE.Material` instance can then be shared by any
+number of entities through the [material component][material]'s `material`
+property or through the `material` property type.
+
+Sharing a single material instance saves memory, avoids duplicate shader
+compilations and texture uploads at runtime, and reduces material switching
+in the renderer.
+
+## Example
+
+```html
+<a-scene>
+  <a-assets>
+    <img id="wood-texture" src="wood.png">
+    <a-material id="wood" src="#wood-texture" roughness="0.8"></a-material>
+    <a-material id="red" shader="flat" color="red"></a-material>
+  </a-assets>
+
+  <!-- Both boxes share the exact same THREE.Material instance. -->
+  <a-box position="-1 1 -3" material="material: #wood"></a-box>
+  <a-box position="1 1 -3" material="material: #wood"></a-box>
+  <a-sphere position="0 2 -3" material="material: #red"></a-sphere>
+</a-scene>
+```
+
+## Attributes
+
+The `shader` attribute selects the shader to create the material with (e.g.,
+`standard`, `flat` or any registered custom shader), defaulting to
+`standard`. All other attributes follow the [material component][material]
+base properties and the properties of the selected [shader][shaders], defined
+as individual HTML attributes:
+
+```html
+<a-material id="hologram" shader="flat" color="#08f" opacity="0.5"
+            side="double" transparent="true"></a-material>
+```
+
+Attribute names are matched case-insensitively against the schema, so
+camelCase properties can be written as-is or hyphen-free lowercase (e.g.,
+`normalMap` or `normalmap`).
+
+Changing an attribute after creation updates the shared material for every
+entity using it. The `shader` attribute cannot be changed after creation.
+
+## Referencing a Material
+
+Entities reference the material asset via the material component's `material`
+property:
+
+```html
+<a-entity geometry="primitive: box" material="material: #wood"></a-entity>
+```
+
+When the `material` property is set, all other material component properties
+are ignored; the material is entirely defined by the `<a-material>` asset.
+Removing the reference (e.g., `el.setAttribute('material', 'material', '')`)
+makes the entity manage its own material again.
+
+Components can also declare a property of type `material` in their schema to
+receive the `THREE.Material` instance directly:
+
+```js
+AFRAME.registerComponent('my-component', {
+  schema: {
+    highlightMaterial: {type: 'material'}
+  },
+  update: function () {
+    // this.data.highlightMaterial is a THREE.Material or null.
+  }
+});
+```
+
+```html
+<a-entity my-component="highlightMaterial: #red"></a-entity>
+```
+
+## Inline Materials
+
+For one-off materials, the `material` property type also accepts an inline
+`material(...)` definition instead of a selector, using the same properties
+as `<a-material>` attributes in style syntax:
+
+```html
+<a-entity hand-tracking-controls="hand: right; handMaterial: material(shader: flat; color: red)"></a-entity>
+<a-box material="material: material(color: #8B4513; roughness: 0.9)"></a-box>
+```
+
+Identical inline definitions (same string) share a single material instance.
+Each inline definition is backed by an `<a-material>` element automatically
+attached under the scene's `<a-assets>`.
+
+## Lifecycle
+
+The scene waits for `<a-material>` elements (including their textures) to
+load before rendering, like other assets. Removing the `<a-material>` element
+from the DOM disposes the material and its textures.
diff --git a/examples/test/material-asset/index.html b/examples/test/material-asset/index.html
new file mode 100644
index 00000000000..b17a73d25d6
--- /dev/null
+++ b/examples/test/material-asset/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Material Assets</title>
+    <meta name="description" content="Materials defined as assets, shared across entities">
+    <script src="../../../dist/aframe-master.js"></script>
+  </head>
+  <body>
+    <a-scene stats>
+      <a-assets>
+        <img id="gradient" src="../../assets/img/gray-gradient.jpg">
+        <a-material id="brand" shader="flat" src="../../assets/img/mozvr.png" transparent="true"></a-material>
+        <a-material id="gold" color="#FFC65D" metalness="0.9" roughness="0.2"></a-material>
+        <a-material id="glass" shader="flat" color="#7BC8A4" opacity="0.5" side="double"></a-material>
+        <a-material id="gradient-mat" src="#gradient" roughness="1"></a-material>
+      </a-assets>
+
+      <!-- All these entities share the same THREE.Material instances. -->
+      <a-box position="-3 1 -4" material="material: #gold"></a-box>
+      <a-sphere position="-1 1.25 -4" radius="0.75" material="material: #gold"></a-sphere>
+      <a-cylinder position="1 1 -4" radius="0.5" material="material: #gold"></a-cylinder>
+
+      <a-box position="-3 2.75 -4" material="material: #brand"></a-box>
+      <a-plane position="3 1.5 -4" width="2" height="2" material="material: #brand"></a-plane>
+
+      <a-box position="-1 2.75 -4" material="material: #glass"></a-box>
+      <a-sphere position="1 2.75 -4" radius="0.5" material="material: #glass"></a-sphere>
+
+      <a-cylinder position="3 3.25 -4" radius="0.5" material="material: #gradient-mat"></a-cylinder>
+
+      <!-- Inline material definitions; identical definitions share one instance. -->
+      <a-box position="-3 4.25 -4" scale="0.5 0.5 0.5"
+             material="material: material(shader: flat; color: #EF2D5E)"></a-box>
+      <a-sphere position="-1.5 4.25 -4" radius="0.35"
+                material="material: material(shader: flat; color: #EF2D5E)"></a-sphere>
+
+      <a-plane rotation="-90 0 0" width="12" height="12" material="material: #gradient-mat"></a-plane>
+
+      <a-sky color="#ECECEC"></a-sky>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/test/material-asset/perf.html b/examples/test/material-asset/perf.html
new file mode 100644
index 00000000000..72fcf63f4bd
--- /dev/null
+++ b/examples/test/material-asset/perf.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Material Assets - Performance Comparison</title>
+    <meta name="description" content="Compare shared material assets against per-entity materials">
+    <script src="../../../dist/aframe-master.js"></script>
+    <style>
+      #hud {
+        background: rgba(0, 0, 0, 0.75);
+        color: #fff;
+        font-family: monospace;
+        font-size: 13px;
+        left: 10px;
+        padding: 10px;
+        position: fixed;
+        top: 10px;
+        white-space: pre;
+        z-index: 9999;
+      }
+      #hud a { color: #7bc8a4; }
+    </style>
+    <script>
+      var params = new URLSearchParams(window.location.search);
+      var SHARED = params.get('shared') !== 'false';
+      var COUNT = parseInt(params.get('n'), 10) || 1000;
+      var FRAMES = 500;
+
+      // Collects timing and renderer statistics, displayed in the #hud element.
+      AFRAME.registerComponent('perf-stats', {
+        init: function () {
+          this.frameTimes = [];
+          this.lastTime = 0;
+          this.done = false;
+          this.loadTime = 0;
+          var self = this;
+          this.el.addEventListener('loaded', function () {
+            self.loadTime = performance.now();
+          });
+        },
+
+        tick: function (time) {
+          if (this.done) { return; }
+          if (this.lastTime) { this.frameTimes.push(time - this.lastTime); }
+          this.lastTime = time;
+          if (this.frameTimes.length >= FRAMES) {
+            this.done = true;
+            this.report();
+          }
+        },
+
+        report: function () {
+          var sceneEl = this.el;
+          var renderer = sceneEl.renderer;
+          var materials = new Set();
+          var textures = new Set();
+          sceneEl.object3D.traverse(function (node) {
+            if (!node.material) { return; }
+            materials.add(node.material);
+            if (node.material.map) { textures.add(node.material.map); }
+          });
+
+          var frameTimes = this.frameTimes.slice().sort(function (a, b) { return a - b; });
+          var sum = frameTimes.reduce(function (a, b) { return a + b; }, 0);
+          var stats = {
+            mode: SHARED ? 'shared <a-material> asset' : 'per-entity materials',
+            entities: COUNT,
+            loadTimeMs: Math.round(this.loadTime),
+            uniqueMaterials: materials.size,
+            uniqueTextures: textures.size,
+            programs: renderer.info.programs.length,
+            texturesGPU: renderer.info.memory.textures,
+            frameAvgMs: +(sum / frameTimes.length).toFixed(2),
+            frameP50Ms: +frameTimes[Math.floor(frameTimes.length * 0.5)].toFixed(2),
+            frameP90Ms: +frameTimes[Math.floor(frameTimes.length * 0.9)].toFixed(2),
+            frameP99Ms: +frameTimes[Math.floor(frameTimes.length * 0.99)].toFixed(2)
+          };
+          window.perfStats = stats;
+          console.log('perf-stats', JSON.stringify(stats));
+          document.getElementById('results').textContent =
+            'mode:             ' + stats.mode + '\n' +
+            'entities:         ' + stats.entities + '\n' +
+            'load time:        ' + stats.loadTimeMs + ' ms\n' +
+            'unique materials: ' + stats.uniqueMaterials + '\n' +
+            'unique textures:  ' + stats.uniqueTextures + '\n' +
+            'GL programs:      ' + stats.programs + '\n' +
+            'GPU textures:     ' + stats.texturesGPU + '\n' +
+            'frame avg:        ' + stats.frameAvgMs + ' ms\n' +
+            'frame p50/p90/p99: ' + stats.frameP50Ms + ' / ' + stats.frameP90Ms +
+              ' / ' + stats.frameP99Ms + ' ms';
+        }
+      });
+
+      window.addEventListener('DOMContentLoaded', function () {
+        var sceneEl = document.querySelector('a-scene');
+        var container = document.getElementById('container');
+        var side = Math.ceil(Math.cbrt(COUNT));
+        var i;
+        var entity;
+        var x;
+        var y;
+        var z;
+
+        for (i = 0; i < COUNT; i++) {
+          x = (i % side) - side / 2;
+          y = Math.floor(i / side) % side;
+          z = -4 - Math.floor(i / (side * side));
+          entity = document.createElement('a-entity');
+          entity.setAttribute('geometry', 'primitive: box; width: 0.4; height: 0.4; depth: 0.4');
+          entity.setAttribute('position', (x * 0.6) + ' ' + (y * 0.6) + ' ' + (z * 0.6));
+          if (SHARED) {
+            entity.setAttribute('material', 'material: #shared');
+          } else {
+            entity.setAttribute('material',
+                                'src: ../../assets/img/gray-gradient.jpg; ' +
+                                'metalness: 0.4; roughness: 0.6; color: #7BC8A4');
+          }
+          container.appendChild(entity);
+        }
+        sceneEl.setAttribute('perf-stats', '');
+      });
+    </script>
+  </head>
+  <body>
+    <div id="hud"><span id="results">collecting…</span>
+
+<a href="?shared=true">shared materials</a> | <a href="?shared=false">per-entity materials</a></div>
+    <a-scene>
+      <a-assets>
+        <a-material id="shared" src="../../assets/img/gray-gradient.jpg"
+                    metalness="0.4" roughness="0.6" color="#7BC8A4"></a-material>
+      </a-assets>
+      <a-entity id="container"></a-entity>
+      <a-entity light="type: ambient; intensity: 0.6"></a-entity>
+      <a-entity light="type: directional; intensity: 1" position="1 2 1"></a-entity>
+      <a-sky color="#222"></a-sky>
+    </a-scene>
+  </body>
+</html>
diff --git a/src/components/material.js b/src/components/material.js
index 4ef5889d6ae..217f8e794b5 100644
--- a/src/components/material.js
+++ b/src/components/material.js
@@ -4,6 +4,7 @@ import { registerComponent } from '../core/component.js';
 import { shaders, shaderNames } from '../core/shader.js';
 
 var error = utils.debug('components:material:error');
+var disposeMaterial = utils.material.disposeMaterial;
 
 /**
  * Material component.
@@ -18,6 +19,7 @@ export var Component = registerComponent('material', {
     depthTest: {default: true},
     depthWrite: {default: true},
     flatShading: {default: false},
+    material: {type: 'material'},
     offset: {type: 'vec2', default: {x: 0, y: 0}},
     opacity: {default: 1.0, min: 0.0, max: 1.0},
     premultipliedAlpha: {default: false},
@@ -39,6 +41,7 @@ export var Component = registerComponent('material', {
 
   init: function () {
     this.material = null;
+    this.materialIsShared = false;
   },
 
   /**
@@ -48,11 +51,19 @@ export var Component = registerComponent('material', {
    */
   update: function (oldData) {
     var data = this.data;
+
+    // Material asset provided (e.g., `material: #myMaterial`). Use the shared material
+    // as-is; all other properties are managed by the <a-material> asset and ignored here.
+    if (data.material) {
+      if (this.material !== data.material) { this.setMaterial(data.material, true); }
+      return;
+    }
+
     if (!this.shader || data.shader !== oldData.shader) {
       this.updateShader(data.shader);
     }
     this.shader.update(this.data);
-    this.updateMaterial(oldData);
+    this.updateMaterial();
   },
 
   updateSchema: function (data) {
@@ -81,6 +92,8 @@ export var Component = registerComponent('material', {
 
     function tickTime (time, delta) {
       var key;
+      // No shader instance to update when using a shared material asset.
+      if (!self.shader) { return; }
       for (key in tickProperties) {
         tickProperties[key] = time;
       }
@@ -122,39 +135,11 @@ export var Component = registerComponent('material', {
 
   /**
    * Set and update base material properties.
-   * Set `needsUpdate` when needed.
+   * `updateBaseMaterial` sets `needsUpdate` when needed, using the material
+   * itself as the source of truth.
    */
-  updateMaterial: function (oldData) {
-    var data = this.data;
-    var material = this.material;
-    var oldDataHasKeys;
-
-    // Base material properties.
-    material.alphaTest = data.alphaTest;
-    material.depthTest = data.depthTest !== false;
-    material.depthWrite = data.depthWrite !== false;
-    material.opacity = data.opacity;
-    material.flatShading = data.flatShading;
-    material.side = parseSide(data.side);
-    material.transparent = data.transparent !== false || data.opacity < 1.0;
-    material.vertexColors = data.vertexColorsEnabled;
-    material.visible = data.visible;
-    material.blending = parseBlending(data.blending);
-    // three.js r178+ requires premultipliedAlpha for MultiplyBlending and
-    // SubtractiveBlending, so force it on regardless of the user-supplied value.
-    material.premultipliedAlpha = (data.blending === 'multiply' || data.blending === 'subtractive')
-      ? true
-      : data.premultipliedAlpha;
-    material.dithering = data.dithering;
-
-    // Check if material needs update.
-    for (oldDataHasKeys in oldData) { break; }
-    if (oldDataHasKeys &&
-        (oldData.alphaTest !== data.alphaTest ||
-         oldData.side !== data.side ||
-         oldData.vertexColorsEnabled !== data.vertexColorsEnabled)) {
-      material.needsUpdate = true;
-    }
+  updateMaterial: function () {
+    utils.material.updateBaseMaterial(this.material, this.data);
   },
 
   /**
@@ -166,7 +151,8 @@ export var Component = registerComponent('material', {
     var material = this.material;
     var object3D = this.el.getObject3D('mesh');
     if (object3D) { object3D.material = defaultMaterial; }
-    disposeMaterial(material, this.system);
+    // Shared materials (via `material` property) are owned by their <a-material> asset.
+    if (!this.materialIsShared) { disposeMaterial(material, this.system); }
   },
 
   /**
@@ -174,16 +160,25 @@ export var Component = registerComponent('material', {
    * material registration in scene.
    *
    * @param {THREE.Material} material - Material to register.
+   * @param {boolean} [isShared=false] - Whether the material is a shared material asset,
+   *        in which case this component does not own (dispose/register) it.
    */
-  setMaterial: function (material) {
+  setMaterial: function (material, isShared) {
     var el = this.el;
     var mesh;
     var system = this.system;
 
-    if (this.material) { disposeMaterial(this.material, system); }
+    if (this.material && !this.materialIsShared) { disposeMaterial(this.material, system); }
 
     this.material = material;
-    system.registerMaterial(material);
+    this.materialIsShared = !!isShared;
+    if (isShared) {
+      // Discard shader instance tied to the previous own material, so a new one is
+      // created if this component goes back to managing its own material.
+      this.shader = null;
+    } else {
+      system.registerMaterial(material);
+    }
 
     // Set on mesh. If mesh does not exist, wait for it.
     mesh = el.getObject3D('mesh');
@@ -198,68 +193,3 @@ export var Component = registerComponent('material', {
     }
   }
 });
-
-/**
- * Return a three.js constant determining which material face sides to render
- * based on the side parameter (passed as a component property).
- *
- * @param {string} [side=front] - `front`, `back`, or `double`.
- * @returns {number} THREE.FrontSide, THREE.BackSide, or THREE.DoubleSide.
- */
-function parseSide (side) {
-  switch (side) {
-    case 'back': {
-      return THREE.BackSide;
-    }
-    case 'double': {
-      return THREE.DoubleSide;
-    }
-    default: {
-      // Including case `front`.
-      return THREE.FrontSide;
-    }
-  }
-}
-
-/**
- * Return a three.js constant determining blending
- *
- * @param {string} [blending=normal] - `none`, additive`, `subtractive`,`multiply` or `normal`.
- * @returns {number}
- */
-function parseBlending (blending) {
-  switch (blending) {
-    case 'none': {
-      return THREE.NoBlending;
-    }
-    case 'additive': {
-      return THREE.AdditiveBlending;
-    }
-    case 'subtractive': {
-      return THREE.SubtractiveBlending;
-    }
-    case 'multiply': {
-      return THREE.MultiplyBlending;
-    }
-    default: {
-      return THREE.NormalBlending;
-    }
-  }
-}
-
-/**
- * Dispose of material from memory and unsubscribe material from scene updates like fog.
- */
-function disposeMaterial (material, system) {
-  material.dispose();
-  system.unregisterMaterial(material);
-
-  // Dispose textures on this material
-  Object.keys(material)
-    .filter(function (propName) {
-      return material[propName] && material[propName].isTexture;
-    })
-    .forEach(function (mapName) {
-      material[mapName].dispose();
-    });
-}
diff --git a/src/core/a-assets.js b/src/core/a-assets.js
index 2ae53599346..96121d8a193 100644
--- a/src/core/a-assets.js
+++ b/src/core/a-assets.js
@@ -85,10 +85,13 @@ class AAssets extends ANode {
       loaded.push(mediaElementLoaded(mediaEl));
     }
 
-    // Wait for <a-asset-item>s
+    // Wait for <a-asset-item>s and <a-material>s.
     children = this.getChildren();
     children.forEach(function (child) {
-      if (!child.isAssetItem || !child.hasAttribute('src')) { return; }
+      // Check tagName instead of a flag for <a-material> as the child might not have
+      // been upgraded yet when the assets element connects.
+      var isLoadableAssetItem = child.isAssetItem && child.hasAttribute('src');
+      if (!isLoadableAssetItem && child.tagName !== 'A-MATERIAL') { return; }
 
       loaded.push(new Promise(function waitForLoaded (resolve, reject) {
         if (child.hasLoaded) { return resolve(); }
diff --git a/src/core/a-material.js b/src/core/a-material.js
new file mode 100644
index 00000000000..7a0316ef43b
--- /dev/null
+++ b/src/core/a-material.js
@@ -0,0 +1,280 @@
+/* global customElements */
+import { ANode } from './a-node.js';
+import { components } from './component.js';
+import { shaders } from './shader.js';
+import { parseProperty } from './schema.js';
+import { setInlineMaterialFactory } from './propertyTypes.js';
+import * as styleParser from '../utils/styleParser.js';
+import * as utils from '../utils/index.js';
+
+var warn = utils.debug('core:a-material:warn');
+
+/**
+ * Material asset element (`<a-material>`), defined within `<a-assets>`.
+ *
+ * Creates a THREE.Material from a shader (e.g., standard, flat) and per-attribute
+ * properties during scene loading so it can be shared across entities via the
+ * `material` property type (e.g., `material="material: #myMaterial"`).
+ *
+ * Properties are set as individual HTML attributes following the material component
+ * base schema and the schema of the selected shader:
+ *
+ *   <a-material id="wood" shader="standard" src="#woodTexture" roughness="0.8"></a-material>
+ *
+ * @member {object} material - Underlying THREE.Material, created lazily.
+ * @member {object} shader - A-Frame shader instance backing the material.
+ * @member {object} data - Parsed property data (base material + shader schema).
+ */
+class AMaterial extends ANode {
+  constructor () {
+    super();
+    this.isMaterialAsset = true;
+    this.material = null;
+    this.shader = null;
+    this.data = null;
+    this.schema = null;
+    this.attrNameMap = null;
+    this.shaderUpdated = false;
+  }
+
+  doConnectedCallback () {
+    super.doConnectedCallback();
+
+    if (!this.isInlineMaterial && (!this.parentNode || !this.parentNode.isAssets)) {
+      warn('<a-material> should be a child of <a-assets>.');
+    }
+
+    this.getMaterial();
+
+    if (this.sceneEl && this.sceneEl.systems.material) {
+      // Texture loading was deferred if the material was created before the scene
+      // systems were available (e.g., on-demand creation by the property type parser).
+      if (!this.shaderUpdated) {
+        this.shader.update(this.data);
+        this.shaderUpdated = true;
+      }
+      this.sceneEl.systems.material.registerMaterial(this.material);
+    }
+
+    this.loadWhenTexturesLoaded();
+  }
+
+  disconnectedCallback () {
+    super.disconnectedCallback();
+    if (!this.material) { return; }
+    if (this.sceneEl && this.sceneEl.systems && this.sceneEl.systems.material) {
+      utils.material.disposeMaterial(this.material, this.sceneEl.systems.material);
+    } else {
+      this.material.dispose();
+    }
+    this.material = null;
+    this.shader = null;
+    this.shaderUpdated = false;
+  }
+
+  attributeChangedCallback (attr, oldVal, newVal) {
+    var key;
+    super.attributeChangedCallback(attr, oldVal, newVal);
+
+    if (!this.material) { return; }
+    key = this.attrNameMap[attr.toLowerCase()];
+    if (!key) { return; }
+    if (key === 'shader') {
+      warn('Cannot change the shader of <a-material> after creation.');
+      return;
+    }
+
+    this.data[key] = parseProperty(newVal === null ? undefined : newVal, this.schema[key]);
+    this.shader.update(this.data);
+    utils.material.updateBaseMaterial(this.material, this.data);
+  }
+
+  /**
+   * Return the THREE.Material, creating it if it does not exist yet.
+   *
+   * @returns {object} THREE.Material
+   */
+  getMaterial () {
+    if (this.material) { return this.material; }
+    this.initMaterial();
+    return this.material;
+  }
+
+  /**
+   * Create shader instance and THREE.Material from the element attributes.
+   * Texture loading (shader update) is deferred if not attached to a scene yet,
+   * as it requires the scene's material system.
+   */
+  initMaterial () {
+    var data;
+    var Shader;
+    var shader;
+
+    this.sceneEl = this.sceneEl || this.closestScene();
+    data = this.data = this.buildData();
+
+    Shader = shaders[data.shader].Shader;
+    shader = this.shader = new Shader();
+    shader.el = this;
+    shader.init(data);
+    this.material = shader.material;
+    this.material.el = this;
+    if (this.id) { this.material.name = this.id; }
+    utils.material.updateBaseMaterial(this.material, data);
+
+    // Texture loading requires the scene's material system, which is not available
+    // before the scene initialized its systems (e.g., when the material is created
+    // on-demand by an early `material` property type parse). Deferred to
+    // doConnectedCallback in that case.
+    if (this.sceneEl && this.sceneEl.systems && this.sceneEl.systems.material) {
+      shader.update(data);
+      this.shaderUpdated = true;
+    }
+  }
+
+  /**
+   * Parse element attributes against the combined base material + shader schema.
+   * HTML attributes are lowercase, so schema keys are matched case-insensitively
+   * (e.g., `metalnessmap` attribute maps to `metalnessMap`).
+   *
+   * @returns {object} Parsed data with defaults filled in.
+   */
+  buildData () {
+    var attr;
+    var attrNameMap = {};
+    var data = {};
+    var i;
+    var key;
+    var schema;
+    var shaderName = window.HTMLElement.prototype.getAttribute.call(this, 'shader') || 'standard';
+
+    if (!shaders[shaderName]) {
+      warn('Unknown shader `' + shaderName + '` for <a-material>. Falling back to `standard`.');
+      shaderName = 'standard';
+    }
+
+    schema = utils.extend({}, components.material.schema, shaders[shaderName].schema);
+    // An <a-material> cannot reference another material asset.
+    delete schema.material;
+
+    for (key in schema) {
+      attrNameMap[key.toLowerCase()] = key;
+      data[key] = parseProperty(undefined, schema[key]);
+    }
+
+    for (i = 0; i < this.attributes.length; i++) {
+      attr = this.attributes[i];
+      key = attrNameMap[attr.name];
+      if (!key) {
+        if (attr.name !== 'id' && attr.name !== 'mixin') {
+          warn('Unknown property `' + attr.name + '` for <a-material> with shader `' +
+               shaderName + '`.');
+        }
+        continue;
+      }
+      data[key] = parseProperty(attr.value, schema[key]);
+    }
+
+    data.shader = shaderName;
+    this.schema = schema;
+    this.attrNameMap = attrNameMap;
+    return data;
+  }
+
+  /**
+   * Emit `loaded` once all textures referenced by the material have loaded,
+   * so `<a-assets>` blocks scene rendering until the material is fully ready.
+   */
+  loadWhenTexturesLoaded () {
+    var data = this.data;
+    var key;
+    var pending = 0;
+    var schema = this.schema;
+    var self = this;
+
+    for (key in schema) {
+      // `sphericalEnvMap` is deprecated and handled through the `envMap` path below.
+      if (schema[key].type !== 'map' || key === 'sphericalEnvMap') { continue; }
+      if (data[key]) { pending++; }
+    }
+    if (data.envMap || data.sphericalEnvMap) { pending++; }
+
+    if (pending === 0) {
+      this.load();
+      return;
+    }
+
+    this.addEventListener('materialtextureloaded', function onTextureLoaded () {
+      pending--;
+      if (pending > 0) { return; }
+      self.removeEventListener('materialtextureloaded', onTextureLoaded);
+      self.load();
+    });
+  }
+}
+
+customElements.define('a-material', AMaterial);
+
+// Cache of <a-material> elements backing inline `material(...)` definitions, keyed by
+// their properties string, so identical inline definitions share one material instance.
+var inlineMaterialEls = {};
+
+/**
+ * Create (or reuse) a material from an inline `material(...)` definition used by the
+ * `material` property type, e.g., `handMaterial: material(shader: flat; color: red)`.
+ *
+ * A detached <a-material> element backs the material. It is attached under the scene's
+ * <a-assets> so textures load and updates flow through the normal element lifecycle.
+ *
+ * @param {string} propsString - Inner properties string (e.g., `shader: flat; color: red`).
+ * @returns {object|null} THREE.Material or null on invalid input.
+ */
+setInlineMaterialFactory(function getOrCreateInlineMaterial (propsString) {
+  var el = inlineMaterialEls[propsString];
+  var key;
+  var props;
+
+  if (!el) {
+    props = styleParser.parse(propsString);
+    if (typeof props !== 'object') {
+      warn('Invalid inline material value: material(' + propsString + ')');
+      return null;
+    }
+    el = document.createElement('a-material');
+    el.isInlineMaterial = true;
+    el.inlineString = 'material(' + propsString + ')';
+    for (key in props) { el.setAttribute(key, props[key]); }
+    inlineMaterialEls[propsString] = el;
+  }
+
+  attachInlineMaterial(el);
+  return el.getMaterial();
+});
+
+/**
+ * Attach an inline material element to the scene so its textures can load.
+ * No-op until a scene exists; retried on every parse of the same definition.
+ */
+function attachInlineMaterial (el) {
+  var assetsEl;
+  var sceneEl;
+
+  if (el.isConnected) { return; }
+  sceneEl = document.querySelector('a-scene');
+  if (!sceneEl) { return; }
+
+  assetsEl = sceneEl.querySelector('a-assets');
+  if (assetsEl) {
+    assetsEl.appendChild(el);
+    return;
+  }
+
+  // No <a-assets>; wire the scene directly so textures can still load.
+  el.sceneEl = sceneEl;
+  el.getMaterial();
+  if (!el.shaderUpdated && sceneEl.systems.material) {
+    el.shader.update(el.data);
+    el.shaderUpdated = true;
+    sceneEl.systems.material.registerMaterial(el.material);
+  }
+}
diff --git a/src/core/a-node.js b/src/core/a-node.js
index 4c78f180582..a51b16966ad 100644
--- a/src/core/a-node.js
+++ b/src/core/a-node.js
@@ -9,6 +9,7 @@ export var knownTags = {
   'a-assets': true,
   'a-assets-items': true,
   'a-cubemap': true,
+  'a-material': true,
   'a-mixin': true,
   'a-node': true,
   'a-entity': true
diff --git a/src/core/propertyTypes.js b/src/core/propertyTypes.js
index a3a345309dc..ae0822c106b 100644
--- a/src/core/propertyTypes.js
+++ b/src/core/propertyTypes.js
@@ -6,6 +6,20 @@ var warn = debug('core:propertyTypes:warn');
 export var propertyTypes = {};
 var nonCharRegex = /[,> .[\]:]/;
 var urlRegex = /url\((.+)\)/;
+var inlineMaterialRegex = /^material\((.*)\)$/;
+var inlineMaterialFactory = null;
+
+/**
+ * Register the factory the `material` property type uses to create materials from
+ * inline `material(...)` values. Set by the <a-material> module, which owns material
+ * creation, to avoid a circular dependency.
+ *
+ * @param {function} factory - Receives the properties string (e.g., `color: red`) and
+ *   returns a THREE.Material or null.
+ */
+export function setInlineMaterialFactory (factory) {
+  inlineMaterialFactory = factory;
+}
 
 // Built-in property types.
 registerPropertyType('audio', '', assetParse, assetStringify);
@@ -16,6 +30,7 @@ registerPropertyType('color', '#FFF');
 registerPropertyType('int', 0, intParse);
 registerPropertyType('number', 0, numberParse);
 registerPropertyType('map', '', assetParse, assetStringify);
+registerPropertyType('material', null, materialParse, materialStringify, defaultEquals, false);
 registerPropertyType('model', '', assetParse, assetStringify);
 registerPropertyType('selector', null, selectorParse, selectorStringify, defaultEquals, false);
 registerPropertyType('selectorAll', null, selectorAllParse, selectorAllStringify, arrayEquals, false);
@@ -132,6 +147,61 @@ function assetStringify (value) {
   return defaultStringify(value);
 }
 
+/**
+ * For material assets.
+ *
+ * @param {string|Element|THREE.Material} value - An ID selector to an `<a-material>`,
+ *   an inline `material(...)` definition, the `<a-material>` element itself, or a
+ *   THREE.Material instance.
+ * @returns {THREE.Material|null} The three.js material or null if not found.
+ */
+function materialParse (value) {
+  var el;
+  var match;
+
+  if (!value) { return null; }
+
+  if (typeof value !== 'string') {
+    // <a-material> element.
+    if (value.isMaterialAsset) { return value.getMaterial(); }
+    // THREE.Material instance passthrough.
+    if (value.isMaterial) { return value; }
+    warn('Unable to parse material property value. ' +
+         'Expected a selector to <a-material>, an <a-material> element or a THREE.Material.');
+    return null;
+  }
+
+  if (value.charAt(0) === '#') {
+    el = document.getElementById(value.substring(1));
+    if (el && el.isMaterialAsset) { return el.getMaterial(); }
+    warn('"' + value + '" is not an <a-material> asset.');
+    return null;
+  }
+
+  // Inline material (e.g., `material(shader: flat; color: red)`).
+  match = value.match(inlineMaterialRegex);
+  if (match) {
+    if (!inlineMaterialFactory) {
+      warn('Inline material syntax is not available.');
+      return null;
+    }
+    return inlineMaterialFactory(match[1]);
+  }
+
+  warn('Unable to parse material property value "' + value + '". ' +
+       'Expected an ID selector to an <a-material> (e.g., #myMaterial) or an inline ' +
+       'definition (e.g., material(color: red)).');
+  return null;
+}
+
+function materialStringify (value) {
+  if (value && value.isMaterial && value.el && value.el.isMaterialAsset) {
+    if (value.el.id) { return '#' + value.el.id; }
+    if (value.el.inlineString) { return value.el.inlineString; }
+  }
+  return defaultStringify(value);
+}
+
 function defaultParse (value) {
   return value;
 }
@@ -215,6 +285,8 @@ export function isValidDefaultValue (type, defaultVal) {
   if (type === 'int' && typeof defaultVal !== 'number') { return false; }
   if (type === 'number' && typeof defaultVal !== 'number') { return false; }
   if (type === 'map' && typeof defaultVal !== 'string') { return false; }
+  if (type === 'material' && typeof defaultVal !== 'string' &&
+      defaultVal !== null) { return false; }
   if (type === 'model' && typeof defaultVal !== 'string') { return false; }
   if (type === 'selector' && typeof defaultVal !== 'string' &&
       defaultVal !== null) { return false; }
diff --git a/src/extras/primitives/getMeshMixin.js b/src/extras/primitives/getMeshMixin.js
index fe4e30fa8e7..2c59d3da34d 100644
--- a/src/extras/primitives/getMeshMixin.js
+++ b/src/extras/primitives/getMeshMixin.js
@@ -10,6 +10,9 @@ Object.keys(components.material.schema).forEach(addMapping);
 Object.keys(shaders.standard.schema).forEach(addMapping);
 
 function addMapping (prop) {
+  // The `material` property (material asset reference) would collide with the material
+  // component name itself. Use `material="material: #ref"` on primitives instead.
+  if (prop === 'material') { return; }
   // To hyphenated.
   var htmlAttrName = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
   if (prop === 'fog') { htmlAttrName = 'material-fog'; }
diff --git a/src/index.js b/src/index.js
index 5c6ed22032e..ab97cc9c327 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,6 +15,7 @@ import * as readyState from './core/readyState.js';
 
 import './core/a-assets.js';
 import './core/a-cubemap.js';
+import './core/a-material.js';
 import './core/a-mixin.js';
 
 import * as utils from './utils/index.js';
diff --git a/src/utils/material.js b/src/utils/material.js
index 8717d81f4ec..f6edfb8c6a0 100644
--- a/src/utils/material.js
+++ b/src/utils/material.js
@@ -20,6 +20,109 @@ var FILTERING_TYPES = {
   'linear-mipmap-linear': THREE.LinearMipmapLinearFilter
 };
 
+/**
+ * Return a three.js constant determining which material face sides to render
+ * based on the side parameter (passed as a component property).
+ *
+ * @param {string} [side=front] - `front`, `back`, or `double`.
+ * @returns {number} THREE.FrontSide, THREE.BackSide, or THREE.DoubleSide.
+ */
+export function parseSide (side) {
+  switch (side) {
+    case 'back': {
+      return THREE.BackSide;
+    }
+    case 'double': {
+      return THREE.DoubleSide;
+    }
+    default: {
+      // Including case `front`.
+      return THREE.FrontSide;
+    }
+  }
+}
+
+/**
+ * Return a three.js constant determining blending
+ *
+ * @param {string} [blending=normal] - `none`, additive`, `subtractive`,`multiply` or `normal`.
+ * @returns {number}
+ */
+export function parseBlending (blending) {
+  switch (blending) {
+    case 'none': {
+      return THREE.NoBlending;
+    }
+    case 'additive': {
+      return THREE.AdditiveBlending;
+    }
+    case 'subtractive': {
+      return THREE.SubtractiveBlending;
+    }
+    case 'multiply': {
+      return THREE.MultiplyBlending;
+    }
+    default: {
+      return THREE.NormalBlending;
+    }
+  }
+}
+
+/**
+ * Set base material properties shared by all shaders (side, blending, opacity...)
+ * given data following the base material component schema.
+ *
+ * @param {THREE.Material} material - Material to update.
+ * @param {object} data - Material component (or <a-material>) data.
+ */
+export function updateBaseMaterial (material, data) {
+  var side = parseSide(data.side);
+
+  // Changes to these properties require the shader program to be rebuilt,
+  // using the material itself as the source of truth.
+  if (material.alphaTest !== data.alphaTest || material.side !== side ||
+      material.vertexColors !== data.vertexColorsEnabled) {
+    material.needsUpdate = true;
+  }
+
+  material.alphaTest = data.alphaTest;
+  material.depthTest = data.depthTest !== false;
+  material.depthWrite = data.depthWrite !== false;
+  material.opacity = data.opacity;
+  material.flatShading = data.flatShading;
+  material.side = side;
+  material.transparent = data.transparent !== false || data.opacity < 1.0;
+  material.vertexColors = data.vertexColorsEnabled;
+  material.visible = data.visible;
+  material.blending = parseBlending(data.blending);
+  // three.js r178+ requires premultipliedAlpha for MultiplyBlending and
+  // SubtractiveBlending, so force it on regardless of the user-supplied value.
+  material.premultipliedAlpha = (data.blending === 'multiply' || data.blending === 'subtractive')
+    ? true
+    : data.premultipliedAlpha;
+  material.dithering = data.dithering;
+}
+
+/**
+ * Dispose of material from memory and unsubscribe material from scene updates like fog.
+ *
+ * @param {THREE.Material} material - Material to dispose.
+ * @param {object} system - Material system.
+ */
+export function disposeMaterial (material, system) {
+  material.dispose();
+  system.unregisterMaterial(material);
+
+  // Dispose textures on this material
+  Object.keys(material)
+    .filter(function (propName) {
+      return material[propName] && material[propName].isTexture;
+    })
+    .forEach(function (mapName) {
+      material[mapName].dispose();
+    });
+}
+
 /**
  * Set texture properties such as repeat and offset.
  *
diff --git a/src/utils/styleParser.js b/src/utils/styleParser.js
index e3e789c2d40..014af19c478 100644
--- a/src/utils/styleParser.js
+++ b/src/utils/styleParser.js
@@ -47,10 +47,19 @@ export function toCamelCase (str) {
  * Split a string into chunks matching `<key>: <value>`
  */
 var getKeyValueChunks = (function () {
-  var chunks = [];
-  var hasUnclosedUrl = /url\([^)]+$/;
+  // Parenthesized values can contain semicolons (e.g., data URIs in `url(...)` or
+  // inline materials in `material(...)`); don't split inside them.
+  function hasUnclosedParen (str) {
+    var depth = 0;
+    var i;
+    for (i = 0; i < str.length; i++) {
+      if (str[i] === '(') { depth++; }
+      if (str[i] === ')' && depth > 0) { depth--; }
+    }
+    return depth > 0;
+  }
 
-  return function getKeyValueChunks (raw) {
+  return function getKeyValueChunks (raw, chunks) {
     var chunk = '';
     var nextSplit;
     var offset = 0;
@@ -64,8 +73,7 @@ var getKeyValueChunks = (function () {
 
       chunk += raw.substring(offset, nextSplit);
 
-      // data URIs can contain semicolons, so make sure we get the whole thing
-      if (hasUnclosedUrl.test(chunk)) {
+      if (hasUnclosedParen(chunk)) {
         chunk += ';';
         offset = nextSplit + 1;
         continue;
@@ -80,6 +88,13 @@ var getKeyValueChunks = (function () {
   };
 })();
 
+// Assigning a parsed value to `obj` can synchronously trigger a nested parse (e.g.,
+// a property setter parsing an inline `material(...)` value), which must not reuse
+// the pooled chunks array of the ongoing call. Pool one chunks array per nesting
+// level, and cap nesting at two levels; anything deeper is not a supported usage.
+var pooledChunks = [[], []];
+var parseDepth = 0;
+
 /**
  * Convert a style attribute string to an object.
  *
@@ -96,15 +111,25 @@ function styleParse (str, obj) {
 
   obj = obj || {};
 
-  chunks = getKeyValueChunks(str);
-  for (i = 0; i < chunks.length; i++) {
-    item = chunks[i];
-    if (!item) { continue; }
-    // Split with `.indexOf` rather than `.split` because the value may also contain colons.
-    pos = item.indexOf(':');
-    key = item.substr(0, pos).trim();
-    val = item.substr(pos + 1).trim();
-    obj[toCamelCase(key)] = val;
+  if (parseDepth >= pooledChunks.length) {
+    throw new Error('Exceeded maximum style string parse nesting (' +
+                    pooledChunks.length + ' levels).');
+  }
+
+  chunks = getKeyValueChunks(str, pooledChunks[parseDepth]);
+  parseDepth++;
+  try {
+    for (i = 0; i < chunks.length; i++) {
+      item = chunks[i];
+      if (!item) { continue; }
+      // Split with `.indexOf` rather than `.split` because the value may also contain colons.
+      pos = item.indexOf(':');
+      key = item.substr(0, pos).trim();
+      val = item.substr(pos + 1).trim();
+      obj[toCamelCase(key)] = val;
+    }
+  } finally {
+    parseDepth--;
   }
   return obj;
 }
diff --git a/tests/core/a-material.test.js b/tests/core/a-material.test.js
new file mode 100644
index 00000000000..3ae9e8ac298
--- /dev/null
+++ b/tests/core/a-material.test.js
@@ -0,0 +1,205 @@
+/* global AFRAME, assert, setup, suite, teardown, test, sinon */
+import THREE from 'lib/three.js';
+
+suite('a-material', function () {
+  setup(function (done) {
+    var sceneEl = this.sceneEl = document.createElement('a-scene');
+    this.sinon = sinon.createSandbox();
+    sceneEl.innerHTML = `
+      <a-assets>
+        <a-material id="red" shader="flat" color="red" side="double"></a-material>
+        <a-material id="pbr" color="#00F" metalness="0.5" roughness="0.3"></a-material>
+        <a-material id="textured" shader="flat" src="url(base/tests/assets/test.png)"></a-material>
+      </a-assets>
+      <a-box material="material: #red"></a-box>
+      <a-sphere material="material: #red"></a-sphere>
+    `;
+    document.body.appendChild(sceneEl);
+    if (sceneEl.hasLoaded) { done(); return; }
+    sceneEl.addEventListener('loaded', function () { done(); });
+  });
+
+  teardown(function () {
+    var sceneEl = this.sceneEl;
+    if (sceneEl.parentNode) { sceneEl.parentNode.removeChild(sceneEl); }
+    this.sinon.restore();
+  });
+
+  test('creates a THREE.Material from attributes', function () {
+    var materialEl = document.getElementById('red');
+    var material = materialEl.getMaterial();
+    assert.ok(material);
+    assert.equal(material.type, 'MeshBasicMaterial');
+    assert.shallowDeepEqual(material.color, {r: 1, g: 0, b: 0});
+    assert.equal(material.side, THREE.DoubleSide);
+    assert.equal(material.name, 'red');
+  });
+
+  test('defaults to standard shader', function () {
+    var material = document.getElementById('pbr').getMaterial();
+    assert.equal(material.type, 'MeshStandardMaterial');
+    assert.equal(material.metalness, 0.5);
+    assert.equal(material.roughness, 0.3);
+    assert.shallowDeepEqual(material.color, {r: 0, g: 0, b: 1});
+  });
+
+  test('loads texture before emitting loaded', function () {
+    var materialEl = document.getElementById('textured');
+    assert.ok(materialEl.hasLoaded);
+    assert.ok(materialEl.getMaterial().map);
+    assert.ok(materialEl.getMaterial().map.isTexture);
+  });
+
+  test('entities share the same material instance', function () {
+    var boxMaterial = this.sceneEl.querySelector('a-box').getObject3D('mesh').material;
+    var sphereMaterial = this.sceneEl.querySelector('a-sphere').getObject3D('mesh').material;
+    var material = document.getElementById('red').getMaterial();
+    assert.equal(boxMaterial, material);
+    assert.equal(sphereMaterial, material);
+  });
+
+  test('updates material when attribute changes', function (done) {
+    var materialEl = document.getElementById('red');
+    var material = materialEl.getMaterial();
+    materialEl.setAttribute('color', 'blue');
+    // Attribute changes are picked up via MutationObserver, so asynchronous.
+    setTimeout(function () {
+      assert.shallowDeepEqual(material.color, {r: 0, g: 0, b: 1});
+      done();
+    }, 0);
+  });
+
+  test('setting base material property updates material', function (done) {
+    var materialEl = document.getElementById('red');
+    var material = materialEl.getMaterial();
+    materialEl.setAttribute('opacity', '0.5');
+    setTimeout(function () {
+      assert.equal(material.opacity, 0.5);
+      assert.ok(material.transparent);
+      done();
+    }, 0);
+  });
+
+  test('only flags needsUpdate when a rebuild-relevant property changes', function (done) {
+    var materialEl = document.getElementById('red');
+    var material = materialEl.getMaterial();
+    var version = material.version;
+    // Same value (side is already double): no rebuild.
+    materialEl.setAttribute('side', 'double');
+    setTimeout(function () {
+      assert.equal(material.version, version);
+      materialEl.setAttribute('side', 'front');
+      setTimeout(function () {
+        assert.equal(material.version, version + 1);
+        done();
+      }, 0);
+    }, 0);
+  });
+
+  test('entity going back to own material does not dispose shared material', function () {
+    var boxEl = this.sceneEl.querySelector('a-box');
+    var sharedMaterial = document.getElementById('red').getMaterial();
+    var disposeSpy = this.sinon.spy(sharedMaterial, 'dispose');
+    boxEl.setAttribute('material', 'material', '');
+    var ownMaterial = boxEl.getObject3D('mesh').material;
+    assert.notEqual(ownMaterial, sharedMaterial);
+    assert.notOk(disposeSpy.called);
+  });
+
+  test('removing material component does not dispose shared material', function () {
+    var boxEl = this.sceneEl.querySelector('a-box');
+    var sharedMaterial = document.getElementById('red').getMaterial();
+    var disposeSpy = this.sinon.spy(sharedMaterial, 'dispose');
+    boxEl.removeAttribute('material');
+    assert.notOk(disposeSpy.called);
+  });
+
+  test('detaching <a-material> disposes its material', function () {
+    var materialEl = document.getElementById('pbr');
+    var material = materialEl.getMaterial();
+    var disposeSpy = this.sinon.spy(material, 'dispose');
+    materialEl.parentNode.removeChild(materialEl);
+    assert.ok(disposeSpy.called);
+    assert.notOk(materialEl.material);
+  });
+
+  test('creates material on demand before scene systems are ready', function (done) {
+    // Reproduces early property type parsing (e.g., entity setAttribute at
+    // DOMContentLoaded): the <a-material> is part of a scene tree that is not
+    // attached to the document yet, so scene systems are not initialized.
+    var sceneEl = document.createElement('a-scene');
+    var assetsEl = document.createElement('a-assets');
+    var materialEl = document.createElement('a-material');
+    materialEl.setAttribute('id', 'early');
+    materialEl.setAttribute('shader', 'flat');
+    materialEl.setAttribute('src', 'url(base/tests/assets/test.png)');
+    assetsEl.appendChild(materialEl);
+    sceneEl.appendChild(assetsEl);
+
+    // Must not throw even though the material system does not exist yet.
+    var material = materialEl.getMaterial();
+    assert.ok(material);
+    assert.notOk(material.map);
+
+    // Once attached, the deferred texture load happens.
+    materialEl.addEventListener('loaded', function () {
+      assert.equal(materialEl.getMaterial(), material);
+      assert.ok(material.map);
+      document.body.removeChild(sceneEl);
+      done();
+    });
+    document.body.appendChild(sceneEl);
+  });
+
+  test('inline material is created and shared through cache', function () {
+    var boxEl = this.sceneEl.querySelector('a-box');
+    var sphereEl = this.sceneEl.querySelector('a-sphere');
+    boxEl.setAttribute('material', 'material: material(shader: flat; color: blue)');
+    sphereEl.setAttribute('material', 'material: material(shader: flat; color: blue)');
+    var material = boxEl.getObject3D('mesh').material;
+    assert.equal(material.type, 'MeshBasicMaterial');
+    assert.shallowDeepEqual(material.color, {r: 0, g: 0, b: 1});
+    assert.equal(sphereEl.getObject3D('mesh').material, material);
+    // Backing <a-material> element is attached under <a-assets>.
+    assert.equal(material.el.parentNode, this.sceneEl.querySelector('a-assets'));
+    assert.equal(material.el.inlineString, 'material(shader: flat; color: blue)');
+  });
+
+  test('inline material combined with other properties parses cleanly', function () {
+    var boxEl = this.sceneEl.querySelector('a-box');
+    // Unique inline definition (not in the factory cache) so the nested style
+    // parse triggered by the attrValueProxy assignment actually runs.
+    boxEl.setAttribute('material',
+                       'material: material(shader: flat; color: #123456); side: double');
+    var attrValue = boxEl.components.material.attrValue;
+    assert.deepEqual(Object.keys(attrValue).sort(), ['material', 'side']);
+    assert.equal(attrValue.material, 'material(shader: flat; color: #123456)');
+    var material = boxEl.getObject3D('mesh').material;
+    assert.equal(material.type, 'MeshBasicMaterial');
+    assert.equal(material.color.getHexString(), '123456');
+  });
+
+  test('inline material works with single-property material type schema', function () {
+    var boxEl = this.sceneEl.querySelector('a-box');
+    AFRAME.registerComponent('test-inline-material', {schema: {type: 'material'}});
+    try {
+      boxEl.setAttribute('test-inline-material', 'material(shader: flat; color: red)');
+      var material = boxEl.getAttribute('test-inline-material');
+      assert.ok(material.isMaterial);
+      assert.shallowDeepEqual(material.color, {r: 1, g: 0, b: 0});
+    } finally {
+      boxEl.removeAttribute('test-inline-material');
+      delete AFRAME.components['test-inline-material'];
+    }
+  });
+
+  test('warns on unknown property', function () {
+    var materialEl = document.createElement('a-material');
+    materialEl.setAttribute('id', 'unknownprops');
+    materialEl.setAttribute('shader', 'flat');
+    materialEl.setAttribute('metalness', '0.5');  // Not part of flat shader.
+    this.sceneEl.querySelector('a-assets').appendChild(materialEl);
+    var material = materialEl.getMaterial();
+    assert.equal(material.type, 'MeshBasicMaterial');
+  });
+});
diff --git a/tests/core/propertyTypes.test.js b/tests/core/propertyTypes.test.js
index 89c88970e3a..df0aa611776 100644
--- a/tests/core/propertyTypes.test.js
+++ b/tests/core/propertyTypes.test.js
@@ -116,6 +116,39 @@ suite('propertyTypes', function () {
     });
   });
 
+  suite('material', function () {
+    var parse = propertyTypes.material.parse;
+    var stringify = propertyTypes.material.stringify;
+
+    test('parses empty value to null', function () {
+      assert.equal(parse(''), null);
+      assert.equal(parse(null), null);
+      assert.equal(parse(undefined), null);
+    });
+
+    test('passes through THREE.Material instance', function () {
+      var material = {isMaterial: true};
+      assert.equal(parse(material), material);
+    });
+
+    test('parses unknown selector to null', function () {
+      assert.equal(parse('#does-not-exist'), null);
+      assert.equal(parse('not-a-selector'), null);
+    });
+
+    test('stringifies material created from <a-material>', function () {
+      var materialEl = {isMaterialAsset: true, id: 'wood'};
+      var material = {isMaterial: true, el: materialEl};
+      assert.equal(stringify(material), '#wood');
+    });
+
+    test('stringifies inline material back to inline syntax', function () {
+      var materialEl = {isMaterialAsset: true, id: '', inlineString: 'material(color: red)'};
+      var material = {isMaterial: true, el: materialEl};
+      assert.equal(stringify(material), 'material(color: red)');
+    });
+  });
+
   suite('selector', function () {
     var parse = propertyTypes.selector.parse;
     var stringify = propertyTypes.selector.stringify;
diff --git a/tests/extras/primitives/primitives.test.js b/tests/extras/primitives/primitives.test.js
index 17b00f6f7c0..b5007cc6658 100644
--- a/tests/extras/primitives/primitives.test.js
+++ b/tests/extras/primitives/primitives.test.js
@@ -24,6 +24,15 @@ suite('primitives', function () {
     assert.ok('a-sphere' in primitives);
     assert.ok('a-videosphere' in primitives);
   });
+
+  test('material `material` property is not mapped on mesh primitives', function () {
+    // The `material` property (material asset reference) collides with the material
+    // component name and must not generate a mapping (nor a renamed
+    // `material-material` mapping with a collision warning).
+    var el = document.createElement('a-box');
+    assert.notOk('material' in el.mappings);
+    assert.notOk('material-material' in el.mappings);
+  });
 });
 
 suite('registerPrimitive', function () {
diff --git a/tests/utils/styleParser.test.js b/tests/utils/styleParser.test.js
new file mode 100644
index 00000000000..ffc1b1e176e
--- /dev/null
+++ b/tests/utils/styleParser.test.js
@@ -0,0 +1,82 @@
+/* global assert, suite, test */
+import * as styleParser from 'utils/styleParser.js';
+
+suite('utils.styleParser', function () {
+  suite('parse', function () {
+    test('parses style string', function () {
+      var result = styleParser.parse('primitive: box; width: 5');
+      assert.equal(result.primitive, 'box');
+      assert.equal(result.width, '5');
+    });
+
+    test('does not split on semicolons within url()', function () {
+      var result = styleParser.parse('src: url(data:image/png;base64,abc=); color: red');
+      assert.equal(result.src, 'url(data:image/png;base64,abc=)');
+      assert.equal(result.color, 'red');
+    });
+
+    test('does not split on semicolons within parentheses', function () {
+      var result = styleParser.parse(
+        'material: material(shader: flat; color: red); side: double');
+      assert.equal(result.material, 'material(shader: flat; color: red)');
+      assert.equal(result.side, 'double');
+    });
+
+    test('handles nested parentheses', function () {
+      var result = styleParser.parse(
+        'material: material(src: url(data:image/png;base64,a=); color: red); side: front');
+      assert.equal(result.material, 'material(src: url(data:image/png;base64,a=); color: red)');
+      assert.equal(result.side, 'front');
+    });
+
+    test('returns plain string unchanged', function () {
+      assert.equal(styleParser.parse('red'), 'red');
+    });
+
+    test('is re-entrant when a property assignment triggers a nested parse', function () {
+      // Simulates the component attrValueProxy: assigning a parsed value can
+      // synchronously parse another style string (e.g., inline material(...)).
+      var obj = {};
+      var nested;
+      Object.defineProperty(obj, 'material', {
+        set: function (value) {
+          nested = styleParser.parse('shader: flat; color: red');
+          this.materialValue = value;
+        },
+        get: function () { return this.materialValue; }
+      });
+
+      var result = styleParser.parse(
+        'material: material(shader: flat; color: red); side: double', obj);
+      assert.equal(result.material, 'material(shader: flat; color: red)');
+      assert.equal(result.side, 'double');
+      assert.notOk('color' in result);
+      assert.shallowDeepEqual(nested, {shader: 'flat', color: 'red'});
+    });
+
+    test('throws when parse nesting exceeds two levels and recovers', function () {
+      var innerObj = {};
+      Object.defineProperty(innerObj, 'b', {
+        get: function () { return undefined; },
+        set: function (value) { styleParser.parse('c: 3'); }
+      });
+      var obj = {};
+      Object.defineProperty(obj, 'a', {
+        get: function () { return undefined; },
+        set: function (value) { styleParser.parse('b: 2', innerObj); }
+      });
+
+      assert.throws(function () { styleParser.parse('a: 1', obj); },
+                    /maximum style string parse nesting/);
+      // Depth unwinds after the throw; subsequent parses work.
+      assert.equal(styleParser.parse('x: 1').x, '1');
+    });
+  });
+
+  suite('stringify', function () {
+    test('stringifies object to style string', function () {
+      assert.equal(styleParser.stringify({primitive: 'box', width: '5'}),
+                   'primitive: box; width: 5');
+    });
+  });
+});