Edit Button

The Edit Button triggers editing of content, styled with an edit (pencil) icon. It extends the Base Button and is accessible out of the box.

Overview

Examples

Usage

Use the button through its directive selector on any element, or through its component selector. The directive form is preferred for new code; the component form remains supported.

html

<!-- Directive (preferred) -->
<button ariaLabel="Edit item" (click)="onEdit()" editButton mat-raised-button>Edit</button>

<!-- Component -->
<edit-button ariaLabel="Edit item" (click)="onEdit()"></edit-button>

API

The default edit button, extending the base button. All other base inputs and outputs are inherited.

Inputs

Name	Type	Default	Description
`label`	`string`	`'Edit'`	Button label text.
`icon`	`string`	`'edit'`	Material icon name rendered before the label.
`classes`	`string`	`'primary-button'`	CSS classes applied to the button.

See the Buttons introduction for the shared inputs, outputs and base-button API.