Icon

Icons can represent concepts and make it easier to visually understand content and actions.

Examples

Contents

UsageAPIs

Usage

Talk about or without needing to spell it out.

APIs

IconSize

inherit""
string
Inherit has the icon take on the current text size.
large"large"
string
1.5rem - 24px
medium"medium"
string
1rem - 16px
small"small"
string
0.75rem - 12px

IIconProps

ariaDescribedBy
string
Optional aria-describedBy
ariaExpanded
boolean
Optional aria-expanded attribute
ariaHidden
boolean | "true" | "false" | "removed"
Optional aria-hidden If not set, it defaults to true. Valid values for extensions are true, false, and undefined.
ariaLabel
string
label that can be added to the icon to help assistive technology understand the meaning of the icon.
ariaLabelledBy
string
Id of another element which labels this one for screen reader users.
className
string
Optional classname to add to the Icon component. If the user wants to use an icon that is not coming from the fabric font the className should contain the font-family and the character to display.
iconName
string
The iconName of the fabric icon to show. Only specify an iconName when the icon is coming from the fabric icon font.
id
string
Optional id for the root element
key
string
A unique identifier for this component.
onClick
(event: React.MouseEvent<HTMLSpanElement>) => void
Optional click handler for the icon
onKeyDown
(event: React.KeyboardEvent<HTMLSpanElement>) => void
Optional keydown handler for the icon.
onMouseDown
(event: React.MouseEvent<HTMLSpanElement>) => void
Optional mousedown handler for the icon.
render
(className?: string) => JSX.Element
Allows for arbitrary content to be rendered instead of using an icon from the fabric icon font. A common scenario would be rendering something like a status icon in place of a font icon. We want to allow for scenarios that expect iconProps to work, but still allow for custom components to be rendered.
role
string
Optional aria role
size
Select from a standard size; for custom scenarios, you'll need to use custom CSS By default, icons will inherit their font size from their parent element; if you're using an Icon inline with text, don't set this
style
React.CSSProperties
Extra styles that should be added to the element, this supports dynamic styles that couldn't be defined statically in CSS.
tabIndex
number
Optional tabindex
title
string
Optional title
tooltipProps
Optional tooltip to show when the icon is hovered.
wrapperClass
string
Class to apply to the wrapper element. Wrapper elements are used when aria props are provided.

Loaded Icon page