Class sap.ui.core.IconModule: sap/ui/core/Icon

extends Control
implements IFormContent

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.


Since: 1.11.1.
Constructor Summary
new sap.ui.core.Icon(sId?, mSettings?)Constructor for a new Icon.
Event Summary
press(oControlEvent)This event is fired when icon is pressed/activated by the user.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.ui.core.Icon.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.ui.core.Icon with name sClassName and enriches it with the information contained in oClassInfo.
sap.ui.core.Icon.getMetadata()Returns a metadata object for class sap.ui.core.Icon.
addAriaLabelledBy(vAriaLabelledBy)Adds some ariaLabelledBy into the association ariaLabelledBy.
attachPress(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the press event of this sap.ui.core.Icon.
detachPress(fnFunction, oListener)Detaches event handler fnFunction from the press event of this sap.ui.core.Icon.
firePress(mParameters?)Fires event press to attached listeners.
getActiveBackgroundColor()Gets current value of property activeBackgroundColor.
getActiveColor()Gets current value of property activeColor.
getAlt()Gets current value of property alt.
getAriaLabelledBy()Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
getBackgroundColor()Gets current value of property backgroundColor.
getColor()Gets current value of property color.
getDecorative()Gets current value of property decorative.
getHeight()Gets current value of property height.
getHoverBackgroundColor()Gets current value of property hoverBackgroundColor.
getHoverColor()Gets current value of property hoverColor.
getNoTabStop()Gets current value of property noTabStop.
getSize()Gets current value of property size.
getSrc()Gets current value of property src.
getUseIconTooltip()Gets current value of property useIconTooltip.
getWidth()Gets current value of property width.
removeAllAriaLabelledBy()Removes all the controls in the association named ariaLabelledBy.
removeAriaLabelledBy(vAriaLabelledBy)Removes an ariaLabelledBy from the association named ariaLabelledBy.
setActiveBackgroundColor(sActiveBackgroundColor)Sets a new value for property activeBackgroundColor.
setActiveColor(sActiveColor)Sets a new value for property activeColor.
setAlt(sAlt)Sets a new value for property alt.
setBackgroundColor(sBackgroundColor)Sets a new value for property backgroundColor.
setColor(sColor)Sets a new value for property color.
setDecorative(bDecorative)Sets a new value for property decorative.
setHeight(sHeight)Sets a new value for property height.
setHoverBackgroundColor(sHoverBackgroundColor)Sets a new value for property hoverBackgroundColor.
setHoverColor(sHoverColor)Sets a new value for property hoverColor.
setNoTabStop(bNoTabStop)Sets a new value for property noTabStop.
setSize(sSize)Sets a new value for property size.
setSrc(sSrc)Sets a new value for property src.
setUseIconTooltip(bUseIconTooltip)Sets a new value for property useIconTooltip.
setWidth(sWidth)Sets a new value for property width.
Constructor Detail
new sap.ui.core.Icon(sId?, mSettings?)

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 for a general description of the syntax of the settings object.

The supported settings are:

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:
stringsId?id for the new control, generated automatically if no id is given
objectmSettings?initial settings for the new control
Event Detail
press(oControlEvent)
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.
Parameters:
sap.ui.base.EventoControlEvent
sap.ui.base.EventProvideroControlEvent.getSource
objectoControlEvent.getParameters
Method Detail
sap.ui.core.Icon.extend(sClassName, oClassInfo?, FNMetaImpl?): function

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.

Parameters:
stringsClassNameName of the class being created
objectoClassInfo?Object literal with information about the class
functionFNMetaImpl?Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
functionCreated class / constructor function
sap.ui.core.Icon.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.ui.core.Icon.
Returns:
sap.ui.base.MetadataMetadata object describing this class
addAriaLabelledBy(vAriaLabelledBy): sap.ui.core.Icon
Adds some ariaLabelledBy into the association ariaLabelledBy.
Parameters:
sap.ui.core.ID|sap.ui.core.ControlvAriaLabelledBythe ariaLabelledBy to add; if empty, nothing is inserted
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
attachPress(oData?, fnFunction, oListener?): sap.ui.core.Icon

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.

Parameters:
objectoData?An application-specific payload object that will be passed to the event handler along with the event object when firing the event
functionfnFunctionThe function to be called when the event occurs
objectoListener?Context object to call the event handler with. Defaults to this sap.ui.core.Icon itself
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
detachPress(fnFunction, oListener): sap.ui.core.Icon

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.

Parameters:
functionfnFunctionThe function to be called, when the event occurs
objectoListenerContext object on which the given function had to be called
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
firePress(mParameters?): sap.ui.core.Icon
Fires event press to attached listeners.
Parameters:
objectmParameters?Parameters to pass along with the event
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
getAccessibilityInfo()
See:
sap.ui.core.Control#getAccessibilityInfo
getActiveBackgroundColor(): string

Gets current value of property activeBackgroundColor.

Background color for Icon in active state.

Returns:
stringValue of property activeBackgroundColor
getActiveColor(): string

Gets current value of property activeColor.

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

Returns:
stringValue of property activeColor
getAlt(): string

Gets current value of property alt.

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

Returns:
stringValue of property alt
Since:
1.30.0
getAriaLabelledBy(): sap.ui.core.ID[]
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
Returns:
sap.ui.core.ID[]
getBackgroundColor(): string

Gets current value of property backgroundColor.

Background color of the Icon in normal state.

Returns:
stringValue of property backgroundColor
getColor(): string

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.

Returns:
stringValue of property color
getDecorative(): boolean

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.

Returns:
booleanValue of property decorative
Since:
1.16.4
getHeight(): sap.ui.core.CSSSize

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.

Returns:
sap.ui.core.CSSSizeValue of property height
getHoverBackgroundColor(): string

Gets current value of property hoverBackgroundColor.

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

Returns:
stringValue of property hoverBackgroundColor
getHoverColor(): string

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.

Returns:
stringValue of property hoverColor
getNoTabStop(): boolean

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.

Returns:
booleanValue of property noTabStop
Since:
1.30.1

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.

Returns:
sap.ui.core.CSSSizeValue of property size
getSrc(): sap.ui.core.URI

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.

Returns:
sap.ui.core.URIValue of property src
getUseIconTooltip(): boolean

Gets current value of property useIconTooltip.

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

Default value is true.

Returns:
booleanValue of property useIconTooltip
Since:
1.30.0
getWidth(): sap.ui.core.CSSSize

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.

Returns:
sap.ui.core.CSSSizeValue of property width
removeAllAriaLabelledBy(): sap.ui.core.ID[]
Removes all the controls in the association named ariaLabelledBy.
Returns:
sap.ui.core.ID[]An array of the removed elements (might be empty)
removeAriaLabelledBy(vAriaLabelledBy): sap.ui.core.ID
Removes an ariaLabelledBy from the association named ariaLabelledBy.
Parameters:
int|sap.ui.core.ID|sap.ui.core.ControlvAriaLabelledByThe ariaLabelledBy to be removed or its index or ID
Returns:
sap.ui.core.IDThe removed ariaLabelledBy or null
setActiveBackgroundColor(sActiveBackgroundColor): sap.ui.core.Icon

Sets a new value for property activeBackgroundColor.

Background color for Icon in active state.

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

Parameters:
stringsActiveBackgroundColorNew value for property activeBackgroundColor
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
setActiveColor(sActiveColor): sap.ui.core.Icon

Sets a new value for property activeColor.

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

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

Parameters:
stringsActiveColorNew value for property activeColor
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
setAlt(sAlt): sap.ui.core.Icon

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.

Parameters:
stringsAltNew value for property alt
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
Since:
1.30.0
setBackgroundColor(sBackgroundColor): sap.ui.core.Icon

Sets a new value for property backgroundColor.

Background color of the Icon in normal state.

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

Parameters:
stringsBackgroundColorNew value for property backgroundColor
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
setColor(sColor): sap.ui.core.Icon

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.

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

Parameters:
stringsColorNew value for property color
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
setDecorative(bDecorative): sap.ui.core.Icon

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.

Parameters:
booleanbDecorativeNew value for property decorative
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
Since:
1.16.4
setHeight(sHeight): sap.ui.core.Icon

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.

Parameters:
sap.ui.core.CSSSizesHeightNew value for property height
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
setHoverBackgroundColor(sHoverBackgroundColor): sap.ui.core.Icon

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.

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

Parameters:
stringsHoverBackgroundColorNew value for property hoverBackgroundColor
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
setHoverColor(sHoverColor): sap.ui.core.Icon

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.

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

Parameters:
stringsHoverColorNew value for property hoverColor
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
setNoTabStop(bNoTabStop): sap.ui.core.Icon

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.

Parameters:
booleanbNoTabStopNew value for property noTabStop
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
Since:
1.30.1
setSize(sSize): sap.ui.core.Icon

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.

Parameters:
sap.ui.core.CSSSizesSizeNew value for property size
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
setSrc(sSrc): sap.ui.core.Icon

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.

Parameters:
sap.ui.core.URIsSrcNew value for property src
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
setUseIconTooltip(bUseIconTooltip): sap.ui.core.Icon

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.

Parameters:
booleanbUseIconTooltipNew value for property useIconTooltip
Returns:
sap.ui.core.IconReference to this in order to allow method chaining
Since:
1.30.0
setWidth(sWidth): sap.ui.core.Icon

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.

Parameters:
sap.ui.core.CSSSizesWidthNew value for property width
Returns:
sap.ui.core.IconReference to this in order to allow method chaining