class sap.ui.core.Icon

Control sample: sap.ui.core.Icon
Visiblity: public
UX Guidelines:
Implements: sap.ui.core.IFormContent
Available since: N/A
Module: sap/ui/core/Icon
Application Component: CA-UI5-COR

Icon uses embedded font instead of pixel image. Comparing to image, Icon is easily scalable, color can be altered live and various effects can be added using css.

A set of built in Icons is available and they can be fetched by calling sap.ui.core.IconPool.getIconURI and set this value to the src property on the Icon.


Constructor

Constructor for a new Icon.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.

new sap.ui.core.Icon(sId?, mSettings?)
Param Type Default Value Description
sId? string

id for the new control, generated automatically if no id is given

mSettings? object

initial settings for the new control


Properties

Name Type Default Value Description
activeBackgroundColor string

Background color for Icon in active state.

The property can be set with CSS Color or Semantic Icon Color.

Visibility: public
activeColor string

This color is shown when icon is pressed/activated by the user.

The property can be set with CSS Color or Semantic Icon Color.

Visibility: public
alt string

This defines the alternative text which is used for outputting the aria-label attribute on the DOM.

Since: 1.30.0.

Visibility: public
backgroundColor string

Background color of the Icon in normal state.

The property can be set with CSS Color or Semantic Icon Color.

Visibility: public
color string

The color of the Icon. If color is not defined here, the Icon inherits the color from its DOM parent.

The property can be set with CSS Color or Semantic Icon Color.

Visibility: public
decorative boolean true

A decorative icon is included for design reasons. Accessibility tools will ignore decorative icons. Tab stop isn't affected by this property anymore and it's now controlled by the existence of press event handler and the noTabStop property.

Since: 1.16.4.

Visibility: public
height sap.ui.core.CSSSize

This is the height of the DOM element which contains the Icon. Setting this property doesn't affect the size of the font. If you want to make the font bigger, increase the size property.

Visibility: public
hoverBackgroundColor string

Background color for Icon in hover state. This property has no visual effect when run on mobile device.

The property can be set with CSS Color or Semantic Icon Color.

Visibility: public
hoverColor string

This color is shown when icon is hovered. This property has no visual effect when run on mobile device.

The property can be set with CSS Color or Semantic Icon Color.

Visibility: public
noTabStop boolean false

Defines whether the tab stop of icon is controlled by the existence of press event handler. When it's set to false, Icon control has tab stop when press event handler is attached. If it's set to true, Icon control never has tab stop no matter whether press event handler exists or not.

Since: 1.30.1.

Visibility: public
size sap.ui.core.CSSSize

Since Icon uses font, this property will be applied to the css font-size property on the rendered DOM element.

Visibility: public
src sap.ui.core.URI

This property should be set by the return value of calling sap.ui.core.IconPool.getIconURI with an Icon name parameter and an optional collection parameter which is required when using application extended Icons. A list of standard FontIcon is available here.

Visibility: public
useIconTooltip boolean true

Decides whether a default Icon tooltip should be used if no tooltip is set.

Since: 1.30.0.

Visibility: public
width sap.ui.core.CSSSize

This is the width of the DOM element which contains the Icon. Setting this property doesn't affect the size of the font. If you want to make the font bigger, increase the size property.

Visibility: public

Borrowed Properties

Name Type Default Value Description
blocked boolean false

Whether the control is currently in blocked state.

Visibility: public
busy boolean false

Whether the control is currently in busy state.

Visibility: public
busyIndicatorDelay int 1000

The delay in milliseconds, after which the busy indicator will show up for this control.

Visibility: public
busyIndicatorSize sap.ui.core.BusyIndicatorSize Medium

The size of the BusyIndicator. For controls with a width smaller 3rem a sap.ui.core.BusyIndicatorSize.Small should be used. If the size could vary in width and the width could get smaller than 3rem, the sap.ui.core.BusyIndicatorSize.Auto option could be used. The default is set to sap.ui.core.BusyIndicatorSize.Medium For a full screen BusyIndicator use sap.ui.core.BusyIndicatorSize.Large.

Since: 1.54.

Visibility: public
fieldGroupIds string[]

The IDs of a logical field group that this control belongs to.

All fields in a logical field group should share the same fieldGroupId. Once a logical field group is left, the validateFieldGroup event is fired.

For backward compatibility with older releases, field group IDs are syntactically not limited, but it is suggested to use only valid sap.ui.core.IDs.

See #attachValidateFieldGroup or consult the Field Group documentation.

Since: 1.31.

Visibility: public
visible boolean true

Whether the control should be visible on the screen.

If set to false, a placeholder will be rendered to mark the location of the invisible control in the DOM of the current page. The placeholder will be hidden and have zero dimensions (display: none).

Also see InvisibleRenderer.

Visibility: public

Aggregations

Default Aggregation:

Name Cardinality Type Description
_invisibleText 0..1 sap.ui.core.InvisibleText

Hidden aggregation for holding the InvisibleText instance which is used for outputing the text labeling the control

Borrowed Aggregations

Name Cardinality Type Description
customData 0..n sap.ui.core.CustomData

Custom Data, a data structure like a map containing arbitrary key value pairs.

dependents 0..n sap.ui.core.Element

Dependents are not rendered, but their databinding context and lifecycle are bound to the aggregating Element.

Since: 1.19.

dragDropConfig 0..n sap.ui.core.dnd.DragDropBase

Defines the drag-and-drop configuration. Note: This configuration might be ignored due to control metadata restrictions.

Since: 1.56.

layoutData 0..1 sap.ui.core.LayoutData

Defines the layout constraints for this control when it is used inside a Layout. LayoutData classes are typed classes and must match the embedding Layout. See VariantLayoutData for aggregating multiple alternative LayoutData instances to a single Element.

tooltip 0..1 sap.ui.core.TooltipBase

The tooltip that should be shown for this Element.

In the most simple case, a tooltip is a string that will be rendered by the control and displayed by the browser when the mouse pointer hovers over the control's DOM. In this variant, tooltip behaves like a simple control property.

Controls need to explicitly support this kind of tooltip as they have to render it, but most controls do. Exceptions will be documented for the corresponding controls (e.g. sap.ui.core.HTML does not support tooltips).

Alternatively, tooltip can act like a 0..1 aggregation and can be set to a tooltip control (an instance of a subclass of sap.ui.core.TooltipBase). In that case, the framework will take care of rendering the tooltip control in a popup-like manner. Such a tooltip control can display arbitrary content, not only a string.

UI5 currently does not provide a recommended implementation of TooltipBase as the use of content-rich tooltips is discouraged by the Fiori Design Guidelines. Existing subclasses of TooltipBase therefore have been deprecated. However, apps can still subclass from TooltipBase and create their own implementation when needed (potentially taking the deprecated implementations as a starting point).

See the section Using Tooltips in the Fiori Design Guideline.


Associations

Name Cardinality Type Description
ariaLabelledBy 0..n sap.ui.core.Control

Association to controls / ids which label this control (see WAI-ARIA attribute aria-labelledby).


Events Overview

Event Description
press

This event is fired when icon is pressed/activated by the user. When a handler is attached to this event, the Icon gets tab stop. If you want to disable this behavior, set the noTabStop property to true.

press

This event is fired when icon is pressed/activated by the user. When a handler is attached to this event, the Icon gets tab stop. If you want to disable this behavior, set the noTabStop property to true.

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object

Methods Overview

Method Description
addAriaLabelledBy

Adds some ariaLabelledBy into the association ariaLabelledBy.

attachPress

Attaches event handler fnFunction to the press event of this sap.ui.core.Icon.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.core.Icon itself.

This event is fired when icon is pressed/activated by the user. When a handler is attached to this event, the Icon gets tab stop. If you want to disable this behavior, set the noTabStop property to true.

detachPress

Detaches event handler fnFunction from the press event of this sap.ui.core.Icon.

The passed function and listener object must match the ones used for event registration.

sap.ui.core.Icon.extend

Creates a new subclass of class sap.ui.core.Icon with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

firePress

Fires event press to attached listeners.

getAccessibilityInfo

References:

  • sap.ui.core.Control#getAccessibilityInfo

getActiveBackgroundColor

Gets current value of property activeBackgroundColor.

Background color for Icon in active state.

The property can be set with CSS Color or Semantic Icon Color.

getActiveColor

Gets current value of property activeColor.

This color is shown when icon is pressed/activated by the user.

The property can be set with CSS Color or Semantic Icon Color.

getAlt

Gets current value of property alt.

This defines the alternative text which is used for outputting the aria-label attribute on the DOM.

getAriaLabelledBy

Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.

getBackgroundColor

Gets current value of property backgroundColor.

Background color of the Icon in normal state.

The property can be set with CSS Color or Semantic Icon Color.

getColor

Gets current value of property color.

The color of the Icon. If color is not defined here, the Icon inherits the color from its DOM parent.

The property can be set with CSS Color or Semantic Icon Color.

getDecorative

Gets current value of property decorative.

A decorative icon is included for design reasons. Accessibility tools will ignore decorative icons. Tab stop isn't affected by this property anymore and it's now controlled by the existence of press event handler and the noTabStop property.

Default value is true.

getHeight

Gets current value of property height.

This is the height of the DOM element which contains the Icon. Setting this property doesn't affect the size of the font. If you want to make the font bigger, increase the size property.

getHoverBackgroundColor

Gets current value of property hoverBackgroundColor.

Background color for Icon in hover state. This property has no visual effect when run on mobile device.

The property can be set with CSS Color or Semantic Icon Color.

getHoverColor

Gets current value of property hoverColor.

This color is shown when icon is hovered. This property has no visual effect when run on mobile device.

The property can be set with CSS Color or Semantic Icon Color.

sap.ui.core.Icon.getMetadata

Returns a metadata object for class sap.ui.core.Icon.

getNoTabStop

Gets current value of property noTabStop.

Defines whether the tab stop of icon is controlled by the existence of press event handler. When it's set to false, Icon control has tab stop when press event handler is attached. If it's set to true, Icon control never has tab stop no matter whether press event handler exists or not.

Default value is false.

getSize

Gets current value of property size.

Since Icon uses font, this property will be applied to the css font-size property on the rendered DOM element.

getSrc

Gets current value of property src.

This property should be set by the return value of calling sap.ui.core.IconPool.getIconURI with an Icon name parameter and an optional collection parameter which is required when using application extended Icons. A list of standard FontIcon is available here.

getUseIconTooltip

Gets current value of property useIconTooltip.

Decides whether a default Icon tooltip should be used if no tooltip is set.

Default value is true.

getWidth

Gets current value of property width.

This is the width of the DOM element which contains the Icon. Setting this property doesn't affect the size of the font. If you want to make the font bigger, increase the size property.

removeAllAriaLabelledBy

Removes all the controls in the association named ariaLabelledBy.

removeAriaLabelledBy

Removes an ariaLabelledBy from the association named ariaLabelledBy.

setActiveBackgroundColor

Sets a new value for property activeBackgroundColor.

Background color for Icon in active state.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

setActiveColor

Sets a new value for property activeColor.

This color is shown when icon is pressed/activated by the user.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

setAlt

Sets a new value for property alt.

This defines the alternative text which is used for outputting the aria-label attribute on the DOM.

When called with a value of null or undefined, the default value of the property will be restored.

setBackgroundColor

Sets a new value for property backgroundColor.

Background color of the Icon in normal state.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

setColor

Sets a new value for property color.

The color of the Icon. If color is not defined here, the Icon inherits the color from its DOM parent.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

setDecorative

Sets a new value for property decorative.

A decorative icon is included for design reasons. Accessibility tools will ignore decorative icons. Tab stop isn't affected by this property anymore and it's now controlled by the existence of press event handler and the noTabStop property.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

setHeight

Sets a new value for property height.

This is the height of the DOM element which contains the Icon. Setting this property doesn't affect the size of the font. If you want to make the font bigger, increase the size property.

When called with a value of null or undefined, the default value of the property will be restored.

setHoverBackgroundColor

Sets a new value for property hoverBackgroundColor.

Background color for Icon in hover state. This property has no visual effect when run on mobile device.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

setHoverColor

Sets a new value for property hoverColor.

This color is shown when icon is hovered. This property has no visual effect when run on mobile device.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

setNoTabStop

Sets a new value for property noTabStop.

Defines whether the tab stop of icon is controlled by the existence of press event handler. When it's set to false, Icon control has tab stop when press event handler is attached. If it's set to true, Icon control never has tab stop no matter whether press event handler exists or not.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

setSize

Sets a new value for property size.

Since Icon uses font, this property will be applied to the css font-size property on the rendered DOM element.

When called with a value of null or undefined, the default value of the property will be restored.

setSrc

Sets a new value for property src.

This property should be set by the return value of calling sap.ui.core.IconPool.getIconURI with an Icon name parameter and an optional collection parameter which is required when using application extended Icons. A list of standard FontIcon is available here.

When called with a value of null or undefined, the default value of the property will be restored.

setUseIconTooltip

Sets a new value for property useIconTooltip.

Decides whether a default Icon tooltip should be used if no tooltip is set.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

setWidth

Sets a new value for property width.

This is the width of the DOM element which contains the Icon. Setting this property doesn't affect the size of the font. If you want to make the font bigger, increase the size property.

When called with a value of null or undefined, the default value of the property will be restored.

addAriaLabelledBy

Adds some ariaLabelledBy into the association ariaLabelledBy.

Param Type DefaultValue Description
vAriaLabelledBy sap.ui.core.ID sap.ui.core.Control

The ariaLabelledBy to add; if empty, nothing is inserted

attachPress

Attaches event handler fnFunction to the press event of this sap.ui.core.Icon.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.core.Icon itself.

This event is fired when icon is pressed/activated by the user. When a handler is attached to this event, the Icon gets tab stop. If you want to disable this behavior, set the noTabStop property to true.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.ui.core.Icon itself

detachPress

Detaches event handler fnFunction from the press event of this sap.ui.core.Icon.

The passed function and listener object must match the ones used for event registration.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

sap.ui.core.Icon.extend

Creates a new subclass of class sap.ui.core.Icon with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

firePress

Fires event press to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

getAccessibilityInfo

References:

getActiveBackgroundColor

Gets current value of property activeBackgroundColor.

Background color for Icon in active state.

The property can be set with CSS Color or Semantic Icon Color.

getActiveColor

Gets current value of property activeColor.

This color is shown when icon is pressed/activated by the user.

The property can be set with CSS Color or Semantic Icon Color.

getAlt

Gets current value of property alt.

This defines the alternative text which is used for outputting the aria-label attribute on the DOM.

getAriaLabelledBy

Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.

getBackgroundColor

Gets current value of property backgroundColor.

Background color of the Icon in normal state.

The property can be set with CSS Color or Semantic Icon Color.

getColor

Gets current value of property color.

The color of the Icon. If color is not defined here, the Icon inherits the color from its DOM parent.

The property can be set with CSS Color or Semantic Icon Color.

getDecorative

Gets current value of property decorative.

A decorative icon is included for design reasons. Accessibility tools will ignore decorative icons. Tab stop isn't affected by this property anymore and it's now controlled by the existence of press event handler and the noTabStop property.

Default value is true.

getHeight

Gets current value of property height.

This is the height of the DOM element which contains the Icon. Setting this property doesn't affect the size of the font. If you want to make the font bigger, increase the size property.

getHoverBackgroundColor

Gets current value of property hoverBackgroundColor.

Background color for Icon in hover state. This property has no visual effect when run on mobile device.

The property can be set with CSS Color or Semantic Icon Color.

getHoverColor

Gets current value of property hoverColor.

This color is shown when icon is hovered. This property has no visual effect when run on mobile device.

The property can be set with CSS Color or Semantic Icon Color.

sap.ui.core.Icon.getMetadata

Returns a metadata object for class sap.ui.core.Icon.

getNoTabStop

Gets current value of property noTabStop.

Defines whether the tab stop of icon is controlled by the existence of press event handler. When it's set to false, Icon control has tab stop when press event handler is attached. If it's set to true, Icon control never has tab stop no matter whether press event handler exists or not.

Default value is false.

getSize

Gets current value of property size.

Since Icon uses font, this property will be applied to the css font-size property on the rendered DOM element.

getSrc

Gets current value of property src.

This property should be set by the return value of calling sap.ui.core.IconPool.getIconURI with an Icon name parameter and an optional collection parameter which is required when using application extended Icons. A list of standard FontIcon is available here.

getUseIconTooltip

Gets current value of property useIconTooltip.

Decides whether a default Icon tooltip should be used if no tooltip is set.

Default value is true.

getWidth

Gets current value of property width.

This is the width of the DOM element which contains the Icon. Setting this property doesn't affect the size of the font. If you want to make the font bigger, increase the size property.

removeAllAriaLabelledBy

Removes all the controls in the association named ariaLabelledBy.

removeAriaLabelledBy

Removes an ariaLabelledBy from the association named ariaLabelledBy.

Param Type DefaultValue Description
vAriaLabelledBy int sap.ui.core.ID sap.ui.core.Control

The ariaLabelledBy to be removed or its index or ID

setActiveBackgroundColor

Sets a new value for property activeBackgroundColor.

Background color for Icon in active state.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sActiveBackgroundColor string

New value for property activeBackgroundColor

setActiveColor

Sets a new value for property activeColor.

This color is shown when icon is pressed/activated by the user.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sActiveColor string

New value for property activeColor

setAlt

Sets a new value for property alt.

This defines the alternative text which is used for outputting the aria-label attribute on the DOM.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sAlt string

New value for property alt

setBackgroundColor

Sets a new value for property backgroundColor.

Background color of the Icon in normal state.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sBackgroundColor string

New value for property backgroundColor

setColor

Sets a new value for property color.

The color of the Icon. If color is not defined here, the Icon inherits the color from its DOM parent.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sColor string

New value for property color

setDecorative

Sets a new value for property decorative.

A decorative icon is included for design reasons. Accessibility tools will ignore decorative icons. Tab stop isn't affected by this property anymore and it's now controlled by the existence of press event handler and the noTabStop property.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Param Type DefaultValue Description
bDecorative boolean true

New value for property decorative

setHeight

Sets a new value for property height.

This is the height of the DOM element which contains the Icon. Setting this property doesn't affect the size of the font. If you want to make the font bigger, increase the size property.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sHeight sap.ui.core.CSSSize

New value for property height

setHoverBackgroundColor

Sets a new value for property hoverBackgroundColor.

Background color for Icon in hover state. This property has no visual effect when run on mobile device.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sHoverBackgroundColor string

New value for property hoverBackgroundColor

setHoverColor

Sets a new value for property hoverColor.

This color is shown when icon is hovered. This property has no visual effect when run on mobile device.

The property can be set with CSS Color or Semantic Icon Color.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sHoverColor string

New value for property hoverColor

setNoTabStop

Sets a new value for property noTabStop.

Defines whether the tab stop of icon is controlled by the existence of press event handler. When it's set to false, Icon control has tab stop when press event handler is attached. If it's set to true, Icon control never has tab stop no matter whether press event handler exists or not.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

Param Type DefaultValue Description
bNoTabStop boolean false

New value for property noTabStop

setSize

Sets a new value for property size.

Since Icon uses font, this property will be applied to the css font-size property on the rendered DOM element.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sSize sap.ui.core.CSSSize

New value for property size

setSrc

Sets a new value for property src.

This property should be set by the return value of calling sap.ui.core.IconPool.getIconURI with an Icon name parameter and an optional collection parameter which is required when using application extended Icons. A list of standard FontIcon is available here.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sSrc sap.ui.core.URI

New value for property src

setUseIconTooltip

Sets a new value for property useIconTooltip.

Decides whether a default Icon tooltip should be used if no tooltip is set.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Param Type DefaultValue Description
bUseIconTooltip boolean true

New value for property useIconTooltip

setWidth

Sets a new value for property width.

This is the width of the DOM element which contains the Icon. Setting this property doesn't affect the size of the font. If you want to make the font bigger, increase the size property.

When called with a value of null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
sWidth sap.ui.core.CSSSize

New value for property width