Icon Toggle

The mdcIconToggle directive creates a material designed icon toggle.

Icon Toggle Demo

favorite_border(Value: false. Uses an icon from Material Icons.)
(Value: true. Uses an icon from Font Awesome.)
(Value: false. Used as a FormControl with [(ngModel)] support.)

Modify toggles:


API

Directive: MdcIconToggleIconDirective

Selector: [mdcIconToggleIcon]

Directive for an icon nested inside a MdcIconToggleDirective. This directive is only needed when the icon font uses CSS pseudo-elements in order to provide the icon. This is how Font Awesome, and many other icon font libraries provide the icons. For icon fonts that don't use pseudo elements (such as the Material Design Icons from Google), this directive is not necessary.

Directive: MdcIconToggleDirective

Selector: [mdcIconToggle]

Directive for creating a Material Design icon toggle button. The icon toggle is fully accessible, and works with any icon font. When the icon font uses CSS pseudo-elements in order to display the icon, embed an MdcIconToggleIconDirective inside this directive for the actual icon. (Otherwise the pseudo-elements used for showing the icon will interfere with the pseudo-elements this directive uses for showing ripple styles).

PropertyDescription
@Output()
onChange
EventEmitter<boolean>

Event emitted when the state of the icon changes (for example when a user clicks the icon).

@Input()
on
any

The current state of the icon (true for on/pressed, false for off/unpressed).

@Input()
labelOn
string

The aria-label to use for the on/pressed state of the icon.

@Input()
labelOff
string

The aria-label to use for the off/unpressed state of the icon.

@Input()
iconOn
string

The icon to use for the on/pressed state of the icon.

@Input()
iconOff
string

The icon to use for the off/unpressed state of the icon.

@Input()
iconIsClass
any

Some icon fonts (such as Font Awesome) use CSS class names to select the icon to show. Others, such as the Material Design Icons from Google use ligatures (allowing selection of the icon by using their textual name). When iconIsClass is true, the directive assumes iconOn, and iconOff represent class names. When iconIsClass is false, the directive assumes the use of ligatures.

When iconIsClass is not assigned, the directive bases its decision on whether or not an embedded MdcIconToggleIconDirective is used. In most cases you won't need to set this input, as the default based on an embedded MdcIconToggleIconDirective is typically what you need.

@Input()
disabled
any

To disable the icon toggle, set this input to true.

Directive: MdcFormsIconToggleDirective

Selector: [mdcIconToggle][formControlName] [mdcIconToggle][formControl] [mdcIconToggle][ngModel]

Directive for adding Angular Forms (ControlValueAccessor) behavior to an MdcIconToggleDirective. Allows the use of the Angular Forms API with icon toggles, e.g. binding to [(ngModel)], form validation, etc.