docs(api): add accessibility section for icons (#2807)

docs/api/icon.md

@@ -18,4 +18,28 @@ For more information, including styling and all available icons, see <a href="ht
 
 import Basic from '@site/static/usage/v7/icon/basic/index.md';
 
-<Basic />
+<Basic />
+
+
+## Accessibility
+
+Icons that are purely decorative content should have <code>aria-hidden="true"</code>. This will not visually hide the icon, but it will hide the element from assistive technology.
+
+```html
+<ion-icon name="heart" aria-hidden="true"></ion-icon>
+```
+
+
+If the icon is interactive, it should have alternate text defined by adding an <code>aria-label</code>.
+
+```html
+<ion-icon name="heart" aria-label="Favorite"></ion-icon>
+```
+
+Alternatively, if the icon is inside of another element that it is describing, that element should have the <code>aria-label</code> added to it, and the icon should be hidden using <code>aria-hidden</code>.
+
+```html
+<ion-button aria-label="Favorite">
+  <ion-icon name="heart" aria-hidden="true"></ion-icon>
+</ion-button>
+```