SVG Icon

Personalization

Icon List

Page Notes

This page lists a series of icons created as custom <gw-icon> element. The element's code uses free SVG paths from FontAwesome (and inserts a citation into the markup).

The icon's color comes from the --icon-color CSS variable. You'll want to define it to change the color. It also gets colors from --link-color and --link-background-color when inside an anchor element.

If your icon is decorative only, consider setting aria-hidden to true to remove clutter for screen reader users.

Attributes

iconKey: The key of the icon to use. Available keys are listed in the main content of this page.
name: Text to insert into the <title> element of the SVG. This provides an accessible name, as well as a tooltip. The default is the iconKey.
titleId: Element ID to use as the <title> element of the SVG. If used, the listed element will be removed. This is useful if you're interested in using progressive enhancement - this way the title text will still show up if the icon fails to load (e.g. if javascript is disabled).
description: Text to insert into the <desc> element of the SG. This provides an accessible description for the element.
iconClasses: CSS classes to be added to the <svg> element directly.
iconStyle: Inline styles to be added to the <svg> element directly.

Files

Add the highlighted files to your page to get started!

Markup

svgIconsDemo.html

Scripts

svgIconControl.js
svgIconDemo.js
personalizationControl.js

Styles

svgIconsDemo.css