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 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 |
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. |
|
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. |
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. |
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. |
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 |
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 |
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 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. |
|
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 ( Also see InvisibleRenderer. Visibility: public |
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 |
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. |
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. |
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, 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. Alternatively, UI5 currently does not provide a recommended implementation of See the section Using Tooltips
|
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). |
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. |
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 |
Method | Description |
---|---|
addAriaLabelledBy |
Adds some ariaLabelledBy into the association ariaLabelledBy. |
attachPress |
Attaches event handler When called, the context of the event handler (its 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 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
|
firePress |
Fires event press to attached listeners. |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 Default value is |
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 |
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 |
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 |
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 Default value is |
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 |
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 |
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 Default value is |
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 |
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 |
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 |
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 |
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 |
Fires event press to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
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.
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.
Gets current value of property alt.
This defines the alternative text which is used for outputting the aria-label attribute on the DOM.
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
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.
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.
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
.
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.
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.
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.
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
.
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.
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.
Gets current value of property useIconTooltip.
Decides whether a default Icon tooltip should be used if no tooltip is set.
Default value is true
.
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.
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |