// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
/**
* Five separate SVG sprites are used to create icons — [action](/icons/#action),
* [custom](/icons/#custom), [doctype](/icons/#doctype), [standard](/icons/#standard)
* and [utility](/icons/#utility). Link to the icon SVG sprite by targeting the
* icon’s hash/ID value in the use href attribute. (You can find the values on
* the [icon page](/icons/).)
*
* When placing the icon code into your page, customize the path in the `use`
* attribute of the `svg` to the proper path and icon name for your specific
* icon. For example, the _case_ icon in the _standard_ sprite would have a
* path like this:
*
* ```
*
* ```
*
* - *Note:** If an icon has more than one word in the name, it should be
* included in the `use` attribute with the underscore separator as shown on
* the icon page. For example: log_a_call.
*
* ##### Changing the background of an icon
*
* Change a background color using composed class names:
*
* ```css
* .slds-icon-[sprite name]-[icon name]
* ```
*
* Place the class on the `.slds-icon_container`.
*
* ```html
*
*
* ...
*
* ```
*
* Some icon names have more than one word, separated by `_` underscores.
* Replace underscores with dashes when composing the class name. So `log_a_call`
* in the standard icon set becomes `.slds-icon-action-log-a-call`.
*
* - For [action](/components/icons?variant=action) icons, add the `.slds-icon_container_circle` class to the container (`.slds-icon_container`), which changes the background shape to a circle.
* - [Doctype](/components/icons?variant=doctype) icons have no background color.
* - [Standard](/components/icons?variant=standard) and [Custom](/components/icons?variant=custom) icons have a rounded square shape and use a class on the container for the background color.
* - [Utility](/components/icons?variant=base) icons have no background color.
*
* #### Changing the fill of an icon using currentColor
*
* To change the fill of an icon to match the current color of it's parent, add the `slds-current-color` class to the icon's container. This class utilizes the css currentColor value.
*
* #### Accessibility
*
* Icons require a `span` with the `.slds-icon_container` class. This contains
* both the `svg` with the base `.slds-icon` class and, if needed, the
* description for assistive screen readers inside a `span` with the
* `.slds-assistive-text` class. A `title` attribute is necessary if the icon
* sits alone and a sighted user might need to hover for a description. If an
* icon has visible descriptive text, no `title` or extra `.slds-assistive-text`
* is required.
*
* - **Note:** You must require SLDS in your application for SVG sprites to work.
* If you’re using Visualforce, see [the Visualforce tutorial](/platforms/visualforce).
* If you’re using [Lightning components, see this documentation](/platforms/lightning).
*
* You can access the SVG sprites by downloading the entire [CSS Framework or
* just the icons](/downloads). To include a sprite in your application, the
* recommended method is to place it into the page as the first element inside
* the `body` element. Alternatively, you can leave the sprite in the
* assets/icons directory and link to it from your page. To render a sprited
* icon, add the tiny [SVG for Everybody](https://github.com/jonathantneal/svg4everybody)
* script for Internet Explorer.
*
* When placed into the `body`, the SVG sprite takes up space in the page. Use
* either `display:none` or `position:absolute` and set both the width and
* height to zero.
*
* ```
*
*
* ...
* ```
*
* @summary Icons provide visual context and enhance usability. Looking for the icons? Go to [Resources › Icons](/icons/).
*
* @base
* @name icons
* @selector .slds-icon_container
* @support dev-ready
* @layout responsive
* @lwc
* @styling-hooks
*/