Icon Button
The mdcIconButton
directive creates a material designed icon buttons and toggle buttons.
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.
Property | Description |
---|---|
@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.
Property | Description |
---|---|
@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 |
@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.