The iron-icon element displays an icon. By default an icon renders as a 24px square.

Example using src:

<iron-icon src="star.png"></iron-icon>

Example setting size to 32px x 32px:

<iron-icon class="big" src="big_star.png"></iron-icon>

<style is="custom-style">
  .big {
    --iron-icon-height: 32px;
    --iron-icon-width: 32px;
  }
</style>

The iron elements include several sets of icons. To use the default set of icons, import iron-icons.html and use the icon attribute to specify an icon:

<link rel="import" href="/components/iron-icons/iron-icons.html">

<iron-icon icon="menu"></iron-icon>

To use a different built-in set of icons, import the specific iron-icons/<iconset>-icons.html, and specify the icon as <iconset>:<icon>. For example, to use a communication icon, you would use:

<link rel="import" href="/components/iron-icons/communication-icons.html">

<iron-icon icon="communication:email"></iron-icon>

You can also create custom icon sets of bitmap or SVG icons.

Example of using an icon named cherry from a custom iconset with the ID fruit:

<iron-icon icon="fruit:cherry"></iron-icon>

See iron-iconset and iron-iconset-svg for more information about how to create a custom iconset.

See the iron-icons demo to see the icons available in the various iconsets.

Styling

The following custom properties are available for styling:

Custom property | Description | Default ----------------|-------------|---------- --iron-icon-width | Width of the icon | 24px --iron-icon-height | Height of the icon | 24px --iron-icon-fill-color | Fill color of the svg icon | currentcolor --iron-icon-stroke-color | Stroke color of the svg icon | none

Annotations
  • CustomElementProxy('iron-icon')
Extends
Mixes-in
  • CustomElementProxyMixin
  • PolymerBase

Properties

JsObject $
read-only, inherited
The underlying Js Element's $ property.
Map<String,String> attributes
read / write, inherited
All attributes on this element.
String baseUri
read-only, inherited
JsArray<JsObject> behaviors
read-only, inherited
The underlying behaviors list created for this element.
CssRect borderEdge
read-only, inherited
Access the dimensions and position of this element's content + padding + border box.
List<Node> childNodes
read-only, inherited
A list of this node's children.
List<Element> children
read / write, inherited
List of the direct children of this element.
CssClassSet classes
read / write, inherited
The set of CSS classes applied to this element.
String className
read / write, inherited
Rectangle client
read-only, inherited
Gets the position of this element relative to the client area of the page.
int clientHeight
read-only, inherited
int clientLeft
read-only, inherited
int clientTop
read-only, inherited
int clientWidth
read-only, inherited
CssRect contentEdge
read-only, inherited
Access this element's content position.
String contentEditable
read / write, inherited
MenuElement contextMenu
read / write, inherited
JsObject customStyle
read-only, inherited
Map<String,String> dataset
read / write, inherited
Allows access to all custom data attributes (data-*) set on this element.
String dir
read / write, inherited
Point documentOffset
read-only, inherited
Provides the coordinates of the element relative to the top of the document.
Element domHost
read-only, inherited
Return the element whose local dom within which this element is contained. This is a shorthand for Polymer.dom(this).getOwnerRoot().host.
bool draggable
read / write, inherited
String dropzone
read / write, inherited
Node firstChild
read-only, inherited
The first child of this node.
bool hidden
read / write, inherited
String icon
read / write
The name of the icon to use. The name should be of the form: iconset_name:icon_name.
String id
read / write, inherited
String innerHtml
read / write, inherited
Parses the HTML fragment and sets it as the contents of this element.
InputMethodContext inputMethodContext
read-only, inherited
bool isContentEditable
read-only, inherited
JsObject jsElement
read-only, inherited
String lang
read / write, inherited
Node lastChild
read-only, inherited
The last child of this node.
JsObject listeners
read-only, inherited
The underlying listeners object created for this element.
String localName
read-only, inherited
CssRect marginEdge
read-only, inherited
Access the dimensions and position of this element's content + padding + border + margin box.
String namespaceUri
read-only, inherited
A URI that identifies the XML namespace of this element.
Element nextElementSibling
read-only, inherited
Node nextNode
read-only, inherited
The next sibling node.
String nodeName
read-only, inherited
The name of this node.
List<Node> nodes
read / write, inherited
A modifiable list of this node's children.
int nodeType
read-only, inherited
The type of node.
String nodeValue
read-only, inherited
The value of this node.
Rectangle offset
read-only, inherited
Gets the offset of this element relative to its offsetParent.
int offsetHeight
read-only, inherited
int offsetLeft
read-only, inherited
Element offsetParent
read-only, inherited
int offsetTop
read-only, inherited
int offsetWidth
read-only, inherited
ElementEvents on
read-only, inherited
This is an ease-of-use accessor for event streams which should only be used when an explicit accessor is not available.
ElementStream<Event> onAbort
read-only, inherited
ElementStream<Event> onBeforeCopy
read-only, inherited
Stream of beforecopy events handled by this Element.
ElementStream<Event> onBeforeCut
read-only, inherited
Stream of beforecut events handled by this Element.
ElementStream<Event> onBeforePaste
read-only, inherited
Stream of beforepaste events handled by this Element.
ElementStream<Event> onBlur
read-only, inherited
ElementStream<Event> onCanPlay
read-only, inherited
ElementStream<Event> onCanPlayThrough
read-only, inherited
ElementStream<Event> onChange
read-only, inherited
ElementStream<MouseEvent> onClick
read-only, inherited
ElementStream<MouseEvent> onContextMenu
read-only, inherited
ElementStream<Event> onCopy
read-only, inherited
Stream of copy events handled by this Element.
ElementStream<Event> onCut
read-only, inherited
Stream of cut events handled by this Element.
ElementStream<Event> onDoubleClick
read-only, inherited
ElementStream<MouseEvent> onDrag
read-only, inherited
ElementStream<MouseEvent> onDragEnd
read-only, inherited
ElementStream<MouseEvent> onDragEnter
read-only, inherited
ElementStream<MouseEvent> onDragLeave
read-only, inherited
ElementStream<MouseEvent> onDragOver
read-only, inherited
ElementStream<MouseEvent> onDragStart
read-only, inherited
ElementStream<MouseEvent> onDrop
read-only, inherited
ElementStream<Event> onDurationChange
read-only, inherited
ElementStream<Event> onEmptied
read-only, inherited
ElementStream<Event> onEnded
read-only, inherited
ElementStream<Event> onError
read-only, inherited
ElementStream<Event> onFocus
read-only, inherited
ElementStream<Event> onFullscreenChange
read-only, inherited
Stream of fullscreenchange events handled by this Element.
ElementStream<Event> onFullscreenError
read-only, inherited
Stream of fullscreenerror events handled by this Element.
ElementStream<Event> onInput
read-only, inherited
ElementStream<Event> onInvalid
read-only, inherited
ElementStream<KeyboardEvent> onKeyDown
read-only, inherited
ElementStream<KeyboardEvent> onKeyPress
read-only, inherited
ElementStream<KeyboardEvent> onKeyUp
read-only, inherited
ElementStream<Event> onLoad
read-only, inherited
ElementStream<Event> onLoadedData
read-only, inherited
ElementStream<Event> onLoadedMetadata
read-only, inherited
ElementStream<MouseEvent> onMouseDown
read-only, inherited
ElementStream<MouseEvent> onMouseEnter
read-only, inherited
ElementStream<MouseEvent> onMouseLeave
read-only, inherited
ElementStream<MouseEvent> onMouseMove
read-only, inherited
ElementStream<MouseEvent> onMouseOut
read-only, inherited
ElementStream<MouseEvent> onMouseOver
read-only, inherited
ElementStream<MouseEvent> onMouseUp
read-only, inherited
ElementStream<WheelEvent> onMouseWheel
read-only, inherited
ElementStream<Event> onPaste
read-only, inherited
Stream of paste events handled by this Element.
ElementStream<Event> onPause
read-only, inherited
ElementStream<Event> onPlay
read-only, inherited
ElementStream<Event> onPlaying
read-only, inherited
ElementStream<Event> onRateChange
read-only, inherited
ElementStream<Event> onReset
read-only, inherited
ElementStream<Event> onResize
read-only, inherited
ElementStream<Event> onScroll
read-only, inherited
ElementStream<Event> onSearch
read-only, inherited
Stream of search events handled by this Element.
ElementStream<Event> onSeeked
read-only, inherited
ElementStream<Event> onSeeking
read-only, inherited
ElementStream<Event> onSelect
read-only, inherited
ElementStream<Event> onSelectStart
read-only, inherited
Stream of selectstart events handled by this Element.
ElementStream<Event> onStalled
read-only, inherited
ElementStream<Event> onSubmit
read-only, inherited
ElementStream<Event> onSuspend
read-only, inherited
ElementStream<Event> onTimeUpdate
read-only, inherited
ElementStream<TouchEvent> onTouchCancel
read-only, inherited
Stream of touchcancel events handled by this Element.
ElementStream<TouchEvent> onTouchEnd
read-only, inherited
Stream of touchend events handled by this Element.
ElementStream<TouchEvent> onTouchEnter
read-only, inherited
Stream of touchenter events handled by this Element.
ElementStream<TouchEvent> onTouchLeave
read-only, inherited
Stream of touchleave events handled by this Element.
ElementStream<TouchEvent> onTouchMove
read-only, inherited
Stream of touchmove events handled by this Element.
ElementStream<TouchEvent> onTouchStart
read-only, inherited
Stream of touchstart events handled by this Element.
ElementStream<TransitionEvent> onTransitionEnd
read-only, inherited
Stream of transitionend events handled by this Element.
ElementStream<Event> onVolumeChange
read-only, inherited
ElementStream<Event> onWaiting
read-only, inherited
String outerHtml
read-only, inherited
Document ownerDocument
read-only, inherited
The document this node belongs to.
CssRect paddingEdge
read-only, inherited
Access the dimensions and position of this element's content + padding box.
Element parent
read-only, inherited
The parent element of this node.
Node parentNode
read-only, inherited
The parent node of this node.
Element previousElementSibling
read-only, inherited
Node previousNode
read-only, inherited
The previous sibling node.
JsObject properties
read-only, inherited
The underlying properties object created for this element.
Node root
read-only, inherited
The shady or shadow root for this element.
int scrollHeight
read-only, inherited
int scrollLeft
read / write, inherited
int scrollTop
read / write, inherited
int scrollWidth
read-only, inherited
ShadowRoot shadowRoot
read-only, inherited
bool spellcheck
read / write, inherited
String src
read / write
If using iron-icon without an iconset, you can set the src to be the URL of an individual icon image file. Note that this will take precedence over a given icon attribute.
CssStyleDeclaration style
read-only, inherited
int tabIndex
read / write, inherited
String tagName
read-only, inherited
String text
read / write, inherited
All text within this node and its decendents.
String theme
read / write
The name of the theme to used, if one is specified by the iconset.
String title
read / write, inherited
bool translate
read / write, inherited
dynamic xtag
read / write, inherited
Experimental support for web components. This field stores a reference to the component implementation. It was inspired by Mozilla's x-tags project. Please note: in the future it may be possible to extend Element from your class, in which case this field will be deprecated.

Constructors

IronIcon()
IronIcon.created()

Methods

$$(String selector) → Element
inherited
Convenience method to run querySelector on this local DOM scope. This function calls Polymer.dom(this.root).querySelector(slctr).
add(String path, item) → void
inherited
Add item to a list at path.
addAll(String path, Iterable items) → void
inherited
Add items to a list at path.
addEventListener(String type, dynamic listener(Event event), [bool useCapture]) → void
inherited
animate(Object effect, [Object timing]) → AnimationPlayer
inherited
append(Node newChild) → Node
inherited
Adds a node to the end of the child nodes list of this node.
appendHtml(String text, {NodeValidator validator, NodeTreeSanitizer treeSanitizer}) → void
inherited
Parses the specified text as HTML and adds the resulting node after the last child of this element.
appendText(String text) → void
inherited
Adds the specified text after the last child of this element.
async(void callback(), {int waitTime}) → int
inherited
Runs a callback function asyncronously.
attached() → void
inherited
Called by the DOM when this element has been inserted into the live document.
attributeChanged(String name, String oldValue, String newValue) → void
inherited
Called by the DOM whenever an attribute on this has been changed.
attributeFollows(String name, Element toElement, Element fromElement) → void
inherited
Removes an HTML attribute from one node, and adds it to another.
blur() → void
inherited
cancelAsync(int handle) → void
inherited
Cancels an async operation started with async.
cancelDebouncer(String jobName) → void
inherited
Cancels an active debouncer. The callback will not be called.
classFollows(String name, Element toElement, Element fromElement) → void
inherited
Removes a class from one node, and adds it to another.
clear(String path) → void
inherited
Remove all items from a list at path.
click() → void
inherited
clone(bool deep) → Node
inherited
Returns a copy of this node.
contains(Node other) → bool
inherited
Returns true if this node contains the specified node.
create(String tag, Map props) → Element
inherited
Convenience method for creating an element and configuring it.
createFragment(String html, {NodeValidator validator, NodeTreeSanitizer treeSanitizer}) → DocumentFragment
inherited
Create a DocumentFragment from the HTML fragment and ensure that it follows the sanitization rules specified by the validator or treeSanitizer.
createShadowRoot() → ShadowRoot
inherited
debounce(String jobName, void callback(), {int waitTime}) → void
inherited
Call debounce to collapse multiple requests for a named task into one invocation which is made after the wait time has elapsed with no new request. If no wait time is given, the callback will be called at microtask timing (guaranteed before paint).
detached() → void
inherited
Called by the DOM when this element has been removed from the live document.
dispatchEvent(Event event) → bool
inherited
distributeContent() → void
inherited
Force this element to distribute its children to its local dom. A user should call distributeContent if distribution has been invalidated due to changes to selectors on child elements that effect distribution that were not made via Polymer.dom. For example, if an element contains an insertion point with <content select=".foo"> and a foo class is added to a child, then distributeContent must be called to update local dom distribution.
elementMatches(String selector, Element node) → bool
inherited
Polyfill for Element.prototype.matches, which is sometimes still prefixed.
enteredView() → void
inherited
Deprecated*: override attached instead.
fillRange(String path, int start, int end, [fillValue]) → void
inherited
Sets the objects in the range start inclusive to end exclusive to the given fillValue on the list at path.
fire(String type, {detail, bool canBubble: true, bool cancelable: true, Node node}) → CustomEvent
inherited
Dispatches a custom event with an optional detail object.
flushDebouncer(String jobName) → void
inherited
Immediately calls the debouncer callback and inactivates it.
focus() → void
inherited
get(String path, [root]) → dynamic
inherited
Gets a value at path for the root object. The root defaults to this. The root must be a JsProxy or PolymerElement object.
getAnimationPlayers() → List<AnimationPlayer>
inherited
getAttribute(String name) → String
inherited
getAttributeNS(String namespaceURI, String localName) → String
inherited
getBoundingClientRect() → Rectangle
inherited
Returns the smallest bounding rectangle that encompasses this element's padding, scrollbar, and border.
getClientRects() → List<Rectangle>
inherited
Returns a list of bounding rectangles for each box associated with this element.
getComputedStyle([String pseudoElement]) → CssStyleDeclaration
inherited
The set of all CSS values applied to this element, including inherited and default values.
getContentChildNodes([String selector]) → List<Node>
inherited
Returns a list of nodes distributed to this element's <content>.
getContentChildren([String selector]) → List<Element>
inherited
Returns a list of element children distributed to this element's <content>.
getDestinationInsertionPoints() → List<Node>
inherited
Returns a list of shadow DOM insertion points to which this element is distributed.
getEffectiveChildNodes() → List<Node>
inherited
Returns a list of nodes that are the effective childNodes. The effective childNodes list is the same as the element's childNodes except that any <content> elements are replaced with the list of nodes distributed to the <content>, the result of its getDistributedNodes method.
getEffectiveChildren() → List<Element>
inherited
Returns a list of elements that are the effective children. The effective children list is the same as the element's children except that any <content> elements are replaced with the list of elements distributed to the <content>.
getEffectiveText() → String
inherited
Returns a string of text content that is the concatenation of the text content's of the element's effective childNodes (the elements returned by getEffectiveChildNodes.
getElementsByClassName(String classNames) → List<Node>
inherited
Returns a list of nodes with the given class name inside this element.
getNamespacedAttributes(String namespace) → Map<String,String>
inherited
Gets a map for manipulating the attributes of a particular namespace.
getPropertyInfo(String property) → JsObject
inherited
Returns a property descriptor object for the property specified.
hasChildNodes() → bool
inherited
Returns true if this node has any children.
importHref(String href, {void onLoad(e), void onError(e)}) → LinkElement
inherited
Convenience method for importing an HTML document imperatively.
insert(String path, int index, element) → void
inherited
Inserts element at position index to the list at path.
insertAdjacentElement(String where, Element element) → Element
inherited
insertAdjacentHtml(String where, String html, {NodeValidator validator, NodeTreeSanitizer treeSanitizer}) → void
inherited
Parses text as an HTML fragment and inserts it into the DOM at the specified location.
insertAdjacentText(String where, String text) → void
inherited
insertAll(String path, int index, Iterable elements) → void
inherited
Inserts elements at position index to the list at path.
insertAllBefore(Iterable<Node> newNodes, Node refChild) → Node
inherited
Inserts all of the nodes into this node directly before refChild.
insertBefore(Node newChild, Node refChild) → Node
inherited
Inserts all of the nodes into this node directly before refChild.
instanceTemplate(TemplateElement template) → DocumentFragment
inherited
Calls importNode on the content of the template specified and returns a document fragment containing the imported content.
isDebouncerActive(String jobName) → bool
inherited
Returns whether a named debouncer is active.
isLightDescendant(Element node) → bool
inherited
Checks whether an element is in this element's light DOM tree.
isLocalDescendant(Element node) → bool
inherited
Checks whether an element is in this element's local DOM tree.
leftView() → void
inherited
Deprecated*: override detached instead.
linkPaths(String to, String from) → void
inherited
Aliases one data path as another, such that path notifications from one are routed to the other.
listen(Element node, String eventName, String methodName) → void
inherited
Convenience method to add an event listener on a given element, late bound to a named method on this element.
matches(String selectors) → bool
inherited
matchesWithAncestors(String selectors) → bool
inherited
Checks if this element or any of its parents match the CSS selectors.
notifyPath(String path, value, {fromAbove: false}) → void
inherited
Notify that a value at a path has been changed.
offsetTo(Element parent) → Point
inherited
Provides the offset of this element's borderEdge relative to the specified parent.
query(String relativeSelectors) → Element
inherited
Alias for querySelector. Note this function is deprecated because its semantics will be changing in the future.
queryAll(String relativeSelectors) → ElementList<Element>
inherited
Alias for querySelectorAll. Note this function is deprecated because its semantics will be changing in the future.
queryAllEffectiveChildren(String selector) → List<Element>
inherited
queryEffectiveChildren(String selector) → Element
inherited
querySelector(String selectors) → Element
inherited
Finds the first descendant element of this element that matches the specified group of selectors.
querySelectorAll(String selectors) → ElementList<Element>
inherited
Finds all descendent elements of this element that match the specified group of selectors.
reflectPropertyToAttribute(String name) → void
inherited
Serializes a property to its associated attribute.
remove() → void
inherited
Removes this node from the DOM.
removeAt(String path, int index) → dynamic
inherited
Removes the item at index from the list at path. Returns the removed element.
removeEventListener(String type, dynamic listener(Event event), [bool useCapture]) → void
inherited
removeItem(String path, value) → bool
inherited
Removes the first occurrence of value from the list at path. Returns true if value was in the list, false otherwise. Note: Renamed from remove because that conflicts with HtmlElement.remove.
removeLast(String path) → dynamic
inherited
Removes the last from the list at path. Returns the removed element.
removeRange(String path, int start, int end) → void
inherited
Removes the objects in the range start inclusive to end exclusive from the list at path.
removeWhere(String path, bool test(element)) → void
inherited
Removes all objects from the list at path that satisfy test. TODO(jakemac): Optimize by removing whole ranges?
replaceRange(String path, int start, int end, Iterable replacement) → void
inherited
Removes the objects in the range start inclusive to end exclusive and inserts the contents of replacement in its place for the list at path.
replaceWith(Node otherNode) → Node
inherited
Replaces this node with another node.
requestFullscreen() → void
inherited
requestPointerLock() → void
inherited
retainWhere(String path, bool test(element)) → void
inherited
Removes all objects from the list at path that fail to satisfy test.
scopeSubtree(Element container, bool shouldObserve) → void
inherited
Apply style scoping to the specified container and all its descendants. If shoudlObserve is true, changes to the container are monitored via mutation observer and scoping is applied.
scrollIntoView([ScrollAlignment alignment]) → void
inherited
Scrolls this element into view.
serializeValueToAttribute(value, String attribute, [Element node]) → void
inherited
Sets a typed value to an HTML attribute on a node.
set(String path, value) → void
inherited
Sets a value on an attribute path, and notifies of changes.
setAll(String path, int index, Iterable iterable) → void
inherited
Overwrites objects in the list at path with the objects of iterable, starting at position index in this list.
setAttribute(String name, String value) → void
inherited
setAttributeNS(String namespaceURI, String qualifiedName, String value) → void
inherited
setInnerHtml(String html, {NodeValidator validator, NodeTreeSanitizer treeSanitizer}) → void
inherited
Parses the HTML fragment and sets it as the contents of this element. This ensures that the generated content follows the sanitization rules specified by the validator or treeSanitizer.
setRange(String path, int start, int end, Iterable iterable, [int skipCount = 0]) → void
inherited
Copies the objects of iterable, skipping skipCount objects first, into the range start, inclusive, to end, exclusive, of the list at path.
setScrollDirection([String direction = 'all', Element node]) → void
inherited
Override scrolling behavior to all direction, one direction, or none.
toggleAttribute(String name, [bool value, Element node]) → void
inherited
Toggles an HTML attribute on or off.
toggleClass(String name, [bool value, Element node]) → void
inherited
Toggles a CSS class on or off.
toString() → String
inherited
The string representation of this element.
transform(String transform, [Element node]) → void
inherited
Cross-platform helper for setting an element's CSS transform property.
translate3d(String x, String y, String z, [Element node]) → void
inherited
Cross-platform helper for setting an element's CSS translate3d property.
unlinkPaths(String path) → void
inherited
Removes a data path alias previously established with linkPaths.
updateStyles() → void
inherited
Re-evaluates and applies custom CSS properties based on dynamic changes to this element's scope, such as adding or removing classes in this element's local DOM.