Icon
Icons can represent concepts and make it easier to visually understand content and actions.
Examples
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
wrapperClass
string
Class to apply to the wrapper element. Wrapper elements are used when aria props are provided.