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