From 810c4f3309b76b3337a155b177398ac2dd8ad0b0 Mon Sep 17 00:00:00 2001
From: David Michael Gang <michaelgang@gmail.com>
Date: Mon, 7 Mar 2016 12:08:50 +0200
Subject: [PATCH] fix(icon): accessibility issue with unique IDs

*  When the same svg icon is placed multiple times in the same page, it raises an aria warning that every element should have an unique id.

fixes #6796. closes #7440.
---
 src/components/icon/icon.spec.js      |  6 ++++++
 src/components/icon/js/iconService.js | 21 ++++++++++++++++-----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/icon/icon.spec.js b/src/components/icon/icon.spec.js
index aa47e4ec264..5d7e6b6cd04 100644
--- a/src/components/icon/icon.spec.js
+++ b/src/components/icon/icon.spec.js
@@ -464,9 +464,15 @@ describe('mdIcon service', function() {
     });
   });
 
+
   function updateDefaults(svg) {
     svg = angular.element(svg)[0];
 
+    svg.removeAttribute('id');
+    angular.forEach(svg.querySelectorAll('[id]'), function(item) {
+      item.removeAttribute('id');
+    });
+
     angular.forEach({
       'xmlns' : 'http://www.w3.org/2000/svg',
       'fit'   : '',
diff --git a/src/components/icon/js/iconService.js b/src/components/icon/js/iconService.js
index 212e5649993..053fec1d25a 100644
--- a/src/components/icon/js/iconService.js
+++ b/src/components/icon/js/iconService.js
@@ -104,7 +104,7 @@
     * @param {string} id Icon name/id used to register the iconset
     * @param {string} url specifies the external location for the data file. Used internally by `$http` to load the
     * data or as part of the lookup in `$templateCache` if pre-loading was configured.
-    * @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set. 
+    * @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
     * It is ignored for icons with an existing viewBox. All icons in the icon set should be the same size.
     * Default value is 24.
     *
@@ -134,7 +134,7 @@
     *
     * @param {string} url specifies the external location for the data file. Used internally by `$http` to load the
     * data or as part of the lookup in `$templateCache` if pre-loading was configured.
-    * @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set. 
+    * @param {number=} viewBoxSize Sets the width and height of the viewBox of all icons in the set.
     * It is ignored for icons with an existing viewBox. All icons in the icon set should be the same size.
     * Default value is 24.
     *
@@ -247,7 +247,7 @@
      config.defaultViewBoxSize = viewBoxSize;
      return this;
    },
-   
+
    /**
     * Register an alias name associated with a font-icon library style ;
     */
@@ -422,8 +422,19 @@
     */
    function cacheIcon( id ) {
 
-     return function updateCache( icon ) {
-       iconCache[id] = isIcon(icon) ? icon : new Icon(icon, config[id]);
+     return function updateCache( _icon ) {
+       var icon = isIcon(_icon) ? _icon : new Icon(_icon, config[id]);
+
+       //clear id attributes to prevent aria issues
+       var elem = icon.element;
+       elem.removeAttribute('id');
+
+       angular.forEach(elem.querySelectorAll('[id]'), function(item) {
+         item.removeAttribute('id');
+       });
+
+       iconCache[id] = icon;
+
 
        return iconCache[id].clone();
      };