A material style icon.

Example usage:

<material-icon
    icon="android">
</material-icon>

This stylesheet should be included at the top of the page:

<link
    rel="stylesheet"
    type="text/css"
    href="https://fonts.googleapis.com/icon?family=Material+Icons">

Make sure to take RTL into account. Specifically, use the flip attribute if the icon should be flipped for RTL UIs. Read these guidelines for advice on when and when not to flip the icon.

Attributes:

  • size: String -- The size of the icon. Options are: x-small, small, medium, large, and x-large, corresponding to 12px, 13px, 16px, 18px, and 20px, respectively. If no size is specified, the default of 24px is used.
  • flip -- Whether the icon should be flipped for RTL languages.
  • light -- Whether the opacity of the icon should be reduced.

Inputs:

  • icon: Icon|String -- The Icon model (lib/model/ui/icon.dart) or icon identifier (String) this component should display.
Annotations
  • @Component(selector: 'material-icon', templateUrl: 'material_icon.html', styleUrls: const ['material_icon.scss.css'], changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespace: false)

Constructors

MaterialIconComponent(HtmlElement _element)

Properties

icon value
The Icon model (lib/model/ui/icon.dart) or icon identifier (String) this component should display. [...]
@Input(), write-only
iconName → String
The icon identifier.
read-only
hashCode → int
The hash code for this object. [...]
read-only, inherited
runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toString() → String
Returns a string representation of this object.
inherited

Operators

operator ==(other) → bool
The equality operator. [...]
inherited