From 1ffe75fcb2229d3c65e157591244b9ba98eb3736 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= <matuzalemteles@gmail.com>
Date: Thu, 15 Feb 2018 18:35:54 -0300
Subject: [PATCH] Add flag to indicate when focusable is true or not | Fixes
 #536

---
 packages/clay-icon/src/ClayIcon.js  | 9 +++++++++
 packages/clay-icon/src/ClayIcon.soy | 7 +++++++
 2 files changed, 16 insertions(+)

diff --git a/packages/clay-icon/src/ClayIcon.js b/packages/clay-icon/src/ClayIcon.js
index c6aa9e943d..bb03fdd2fe 100644
--- a/packages/clay-icon/src/ClayIcon.js
+++ b/packages/clay-icon/src/ClayIcon.js
@@ -25,6 +25,15 @@ ClayIcon.STATE = {
 	 */
 	elementClasses: Config.string(),
 
+	/**
+	 * Flag to indicate when svg focusable or not.
+	 * @instance
+	 * @memberof ClayIcon
+	 * @type {?bool}
+	 * @default false
+	 */
+	focusable: Config.bool().value(false),
+
 	/**
 	 * Id to be applied to the element.
 	 * @instance
diff --git a/packages/clay-icon/src/ClayIcon.soy b/packages/clay-icon/src/ClayIcon.soy
index 44f8672048..be1b2f5ab3 100644
--- a/packages/clay-icon/src/ClayIcon.soy
+++ b/packages/clay-icon/src/ClayIcon.soy
@@ -7,6 +7,7 @@
 	{@param spritemap: string}
 	{@param symbol: string}
 	{@param? elementClasses: string}
+	{@param? focusable: bool}
 	{@param? id: string}
 	{@param? title: string}
 
@@ -20,6 +21,12 @@
 			{/if}
 		"
 
+		{if $focusable}
+			focusable="true"
+		{else}
+			focusable="false"
+		{/if}
+
 		{if $id}
 			id="{$id}"
 		{/if}