Blox Material v1.0.0-beta.3

Icon Button

The mdcIconButton directive creates a material designed icon buttons and toggle buttons.

Icon Buttons

Icon Action Buttons:

Icon Toggle Buttons:

(Value: false. Uses an icon from Material Icons)
(Value: true. Uses an icon from Font Awesome)
(Value: false. Used with FormModule [(ngModel)] binding)

Modify:


API

Directive: MdcIconButtonDirective

Selector: button[mdcIconButton] a[mdcIconButton]

Directive for an icon button. Icon buttons can be used with a font icon library such as Google Material Icons, SVG elements or images. They provide material styling and a ripple to the icon. Use it on anchor and button tags. For toggling icon buttons, see MdcIconToggleDirective.

Directive: MdcIconDirective

Selector: [mdcIcon]

Directive for the icon to display on one of the toggle states of an mdcIconToggle. See MdcIconToggleDirective for more information.

Property Description
@Input()
mdcIcon
"" | "on"

Set this input to false to remove the ripple effect from the surface.

Directive: MdcIconToggleDirective

Selector: [mdcIconToggle]

Directive for creating a Material Design icon toggle button: a button that toggles state, and switches the icon based on the value of the toggle.

When the applied icon font uses CSS pseudo elements, add a child element for the actual icon, and give that element the mdcIconButtonIcon directive. The icon button will then update the child element with the correct icon if it is toggled.

Property Description
@Input()
label
string | null

The aria-label to assign to the icon toggle. You can override the value for the on respectively off state by assigning to property labelOn or labelOff.

@Input()
labelOn
string | null

The aria-label to assign to the icon toggle when it is on. If this input has no value, the aria-label will default to the value of the label input.

@Input()
labelOff
string | null

The aria-label to assign to the icon toggle when it is off. If this input has no value, the aria-label will default to the value of the label input.

@Output()
onChange
EventEmitter<boolean>

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

@Input()
on
boolean

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

@Input()
disabled
boolean

To disable the icon, set this input to true.

Directive: MdcFormsIconButtonDirective

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 toggle buttons, e.g. binding to [(ngModel)], form validation, etc.