# Icon
**Also known as:** Glyph, Symbol
## Description
An icon draws one glyph: a concept or a meaning shown rather than spelled out. It renders any of the 2,300 built-in Fabric MDL2 glyphs by name, or a glyph from any other icon set you have linked - FontAwesome, Bootstrap Icons, Material Icons and Material Symbols each have a factory of their own, and anything else is a matter of naming its CSS classes. It takes one of the theme's colors and one of its three sizes (or a font size of your own), is drawn plain, filled, outlined or in a circle, can be turned by a quarter or by any angle, mirrored, mirrored only in right-to-left, given a fixed width so a column of icons lines up, and set spinning, beating or bouncing at a speed of your own while something is happening. It is hidden from screen readers until you name it, becomes a real keyboard-operable button when you give it a click handler, and can hold an inline SVG of your own instead of a glyph.
## Notes
An icon is decorative by default and is hidden from assistive technology, because the overwhelming majority of icons sit beside a label that already says the same thing. Give it an AriaLabel or a Title the moment it is the only thing carrying the meaning.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Animation | `BitIconAnimation?` | null | Specifies a looping animation to play on the icon. The animation is drawn with a transform of its own while Rotate, RotateAngle and Flip are drawn with the individual rotate and scale properties beside it, so the two compose: a mirrored arrow still spins, and it spins around the angle it was turned to. |
| AnimationDuration | `string?` | null | Overrides how long one cycle of the animation takes, as any CSS time. The reduced motion factor still multiplies it, so an animation asked to run fast still slows down for a reader who asked for less motion. |
| AnimationDelay | `string?` | null | Waits this long before the animation starts, as any CSS time - which is what turns a row of identical animated icons into a wave. The wait is not stretched under reduced motion the way the cycle is. |
| ChildContent | `RenderFragment?` | null | The content rendered inside the icon element, for an icon set that is neither a font nor a class - an inline svg, an image, a ligature of your own. The color, the size and the variant still apply around it. |
| Circular | `bool` | false | Draws the icon in a circle rather than in the rounded box of the design system, squaring the box off at the same time so a narrow glyph and a wide one are drawn in circles of the same size. |
| Color | `BitColor?` | null | Specifies the color theme of the icon. Default value is BitColor.Primary. |
| FixedWidth | `bool` | false | Renders the icon in a box of a fixed width so that a column of icons of different widths lines up. |
| Flip | `BitIconFlip?` | null | Mirrors the icon on the horizontal axis, the vertical axis, or both. |
| FlipRtl | `bool` | false | Mirrors the icon horizontally when it is rendered in a right-to-left direction. The direction is read off the rendered document, so it follows an ancestor's dir as well as the component's own Dir. |
| FontSize | `string?` | null | Specifies the font size of the icon, as any CSS length or the inherit keyword. Overrides Size when both are given. |
| Icon | `BitIconInfo?` | null | Specifies the icon configuration for rendering icons from external icon libraries. Takes precedence over IconName when both name a glyph. |
| IconName | `string?` | null | Specifies the name of the icon from the built-in Fluent UI icon library. This property is ignored when Icon names a glyph. |
| IconResolver | `Func<string, BitIconInfo?>?` | null | Names the icon set that IconName is a name in - name => BitIconInfo.Fa(name), BitIconInfo.Ms, or a lookup of your own. An Icon that names a glyph still wins over it, and a resolver that answers with null leaves the name to the built-in set. Cascades through BitParams to a whole subtree. |
| Inline | `bool` | false | Drops the icon a quarter of an em below the baseline so that an inline svg or an image given as ChildContent sits centered on the line of text it is written in. A glyph of an icon font needs none of it. |
| OnClick | `EventCallback<MouseEventArgs>` | | The callback for when the icon is clicked. An icon with a click handler joins the tab order, answers Enter and Space, and is announced as a button - so give it an AriaLabel or a Title. |
| Rotate | `BitIconRotate?` | null | Turns the icon by a quarter, a half, or three quarters of a turn. |
| RotateAngle | `int?` | null | Turns the icon by an angle of your own, in degrees, negative for counter-clockwise. It replaces Rotate when both are given, and composes with Flip and FlipRtl. |
| Size | `BitSize?` | null | Specifies the size of the icon. Default value is BitSize.Medium. |
| Title | `string?` | null | The text shown in the native tooltip when the pointer rests on the icon. It also names the icon for assistive technology, so an icon that carries one is announced rather than skipped. |
| Variant | `BitVariant?` | null | Specifies the visual styling variant of the icon. Default value is BitVariant.Text. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| FocusAsync | `ValueTask` | | Gives focus to the icon element. Only an icon the browser can focus takes it: one with an OnClick handler, or one given a TabIndex of its own. |
| FocusAsync(bool preventScroll) | `ValueTask` | | Gives focus to the icon element, leaving the page scrolled where it is instead of bringing the icon into view. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitColor Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | Info Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | Display icon using small size. |
| Medium | 1 | Display icon using medium size. |
| Large | 2 | Display icon using large size. |
### BitVariant Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Fill | 0 | Fill styled variant. |
| Outline | 1 | Outline styled variant. |
| Text | 2 | Text styled variant. |
### BitIconRotate Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Rotate90 | 0 | A quarter turn clockwise. |
| Rotate180 | 1 | A half turn. |
| Rotate270 | 2 | A quarter turn counter-clockwise. |
### BitIconFlip Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Horizontal | 0 | Mirrored left to right. |
| Vertical | 1 | Mirrored top to bottom. |
| Both | 2 | Mirrored on both axes, which is the same as a half turn for an asymmetric glyph. |
### BitIconAnimation Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Spin | 0 | Turns continuously clockwise - the loading spinner. |
| SpinReverse | 1 | Turns continuously counter-clockwise. |
| Pulse | 2 | Turns clockwise in eight discrete steps, the way a segmented spinner ticks around. |
| Beat | 3 | Scales up and back down, to draw the eye to something that just changed. |
| Fade | 4 | Fades out and back in. |
| Shake | 5 | Rocks back and forth, for something that needs attention now. |
| Bounce | 6 | Jumps up and lands again, squashing on the way out and on the way back - the heaviest of these. |
| BeatFade | 7 | Scales up and fades in together, which reads as a slower, softer Beat. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitIconInfo Properties
Names a glyph for any icon set. A class-based set (Fabric MDL2, FontAwesome, Bootstrap Icons) is described by BaseClass, Prefix and Name; a ligature-based set (Material Icons, Material Symbols) puts the family on BaseClass and the ligature on Content. The static factories build each of them: Bit(name), Fa(icons), Bi(name), Mi(name, style), Ms(name, style), Css(cssClasses), and From(icon, iconName) which resolves an Icon/IconName pair. A plain string converts implicitly and is taken as the complete class list.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string?` | null | The name of the icon. For an external set this can be the complete CSS class list when BaseClass and Prefix are empty. |
| BaseClass | `string?` | null | The base CSS class of the icon set - "bit-icon" for the built-in set, "bi" for Bootstrap Icons, "material-symbols-outlined" for Material Symbols. Leave it empty for a set that needs none. |
| Prefix | `string?` | null | The CSS class prefix written before the icon name - "bit-icon--" for the built-in set, "bi-" for Bootstrap Icons. Leave it empty for a set that uses none. |
| Content | `string?` | null | The text rendered inside the icon element - the ligature of a ligature-based icon set such as Material Icons or Material Symbols. Class-based sets leave it null. Only a component that renders the icon's content puts it on the page, which BitIcon does; the glyphs the library draws inside its other controls are class-based, so a ligature set has to be given to a BitIcon. |
| IsEmpty | `bool` | | Whether this instance names no glyph at all - nothing to put in a class attribute, and nothing to write as the element's text. An empty instance is treated as no icon, so an IconName given beside it is still used. |
## Examples
\n**Basic**:
```razor
faResolver =
name => name is "house" or "heart" or "rocket" ? BitIconInfo.Fa($"solid {name}") : null;
// The same resolver given to every icon of a subtree at once:
// ...
```
\n**Size**:
```razor
Home Settings Profile Sign out
Home Settings Profile Sign out
Clicked @clickCount times.
```
```csharp
private bool isStarred = true;
private int clickCount;
```
\n**Custom content**:
```razor
Aligned by its box
and dropped onto the line with Inline
```
\n**Accessibility**:
```razor
Sized by the text around it
```
\n**Style & Class**:
```razor