@gitlab/ui/src/components/base/icon/icon.md

GitLab UI Components

## Usage

The Icon component can be used to render any svg within the @gitlab/svgs icon sprites.

### Accessibility

`gl-icon` icons are hidden from screen readers by default, as usages of icons are commonly decorative.

If the icon is not decorative, add an `aria-label` attribute to `gl-icon` to give it an accessible name.
This label is read out by screen readers.

If the icon is clickable, use `gl-button` instead of `gl-icon` because a clickable element should
semantically be a button.

```html
<!-- icon, which is hidden from screen readers by default  -->
<gl-icon name="rocket" />

<!-- icon, which has an accessible name "Confidential issue" that is read out by screen readers -->
<gl-icon name="eye-slash" :aria-label="__('Confidential issue')" />

<!-- clickable icon, which is borderless and padding-less -->
<gl-button icon="close" category="tertiary" class="gl-p-0!" aria-label="Close" />
```

For more information about icons within GitLab, visit the
[GitLab accessibility guidelines](https://docs.gitlab.com/ee/development/fe_guide/accessibility#icons).