blox material: components for angularblox material: angular componentsmaterial components

Icon Button

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

Icon Button Demo

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: MdcIconButtonIconDirective

Selector: [mdcIconButtonIcon]

Directive for an icon nested inside a MdcIconButtonDirective. This directive is only required when the icon font for an mdcIconButton uses CSS pseudo-elements in order to provide the icon. This is how Font Awesome, and many other icon font libraries provide their icons. These pseudo elements would interfere with the pseudo elements that mdcIconButton uses to provide a ripple effect. This can be solved by having a child element in your mdcIconButton and set this directive on it. The icon classes will then be applied to the child element, and won't interfere with the icon button pseudo elements anymore.

For icon fonts that don't use pseudo elements (such as the Material Design Icons from Google), this directive is not necessary.

Directive: MdcIconButtonDirective

Selector: [mdcIconButton]:not([iconOn])

Directive for an icon button. Icon buttons can be used with a font icon library such as Google Material Icons, or svg elements. They provide material styling and a ripple to the icon. Use it on anchor and button tags. For toggling icon buttons, see MdcIconButtonToggleDirective. When the applied icon font uses CSS pseudo elements, make the icon a child element of the mdcIconButton, and give it the mdcIconButtonIcon directive.

PropertyDescription
@Input()
disabled
any

To disable the icon, set this input to true.

Directive: MdcIconButtonToggleDirective

Selector: [mdcIconButton][iconOn]

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.

PropertyDescription
@Output()
onChange
EventEmitter<boolean>

Event emitted when the state of the icon toggle 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 set, the value depends on the availability of a nested mdcIconButtonIcon directive: when that exists, iconOn and iconOff are expected to be classnames, otherwise they are expected to be ligatures. This is usually the intended behaviour, so in most cases you don't need to initialize the iconIsClass property.

@Input()
disabled
any

To disable the icon, set this input to true.

Directive: MdcFormsIconButtonDirective

Selector: [mdcIconButton][iconOn][formControlName] [mdcIconButton][iconOn][formControl] [mdcIconButton][iconOn][ngModel]

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