Icon
Introduction
Icon
displays an SVG image from Blueprint's library of 300+ icons.
The below information is a snippet from the
related section in the Blueprint reference documentation.
Examples
Usage
API Reference
Icon
Prop Name | Required? | Type | Description |
---|---|---|---|
children | false | never | This component does not support custom children. Use the `icon` prop. |
className | false | string | A space-delimited list of class names to pass along to a child element. |
color | false | string | Color of icon. This is used as the `fill` attribute on the `<svg>` image so it will override any CSS `color` property, including that set by `intent`. If this prop is omitted, icon color is inherited from surrounding text. |
htmlTitle | false | string | String for the `title` attribute on the rendered element, which will appear on hover as a native browser tooltip. |
icon | true | IconName | MaybeElement | Name of a Blueprint UI icon, or an icon element, to render. This prop is required because it determines the content of the component, but it can be explicitly set to falsy values to render nothing. - If `null` or `undefined` or `false`, this component will render nothing. - If given an `IconName` (a string literal union of all icon names), that icon will be rendered as an `<svg>` with `<path>` tags. Unknown strings will render a blank icon to occupy space. - If given a `JSX.Element`, that element will be rendered and _all other props on this component are ignored._ This type is supported to simplify icon support in other Blueprint components. As a consumer, you should avoid using `<Icon icon={<Element />}` directly; simply render `<Element />` instead. |
iconSize | false | number | Size of the icon, in pixels. Blueprint contains 16px and 20px SVG icon images, and chooses the appropriate resolution based on this prop. |
intent | false | Intent | Visual intent color to apply to element. |
style | false | CSSProperties | CSS style properties. |
tagName | false | keyof IntrinsicElements | HTML tag to use for the rendered element. |
title | false | string | false | null | Description string. This string does not appear in normal browsers, but it increases accessibility. For instance, screen readers will use it for aural feedback. By default, this is set to the icon's name. Pass an explicit falsy value to disable. |
Related Reading
Blueprint Reference