Text field icon

Icons describe the type of input a text field requires. They can also be interaction targets.

Basic usage

HTML structure

Icon set

We recommend using Material Icons from Google Fonts:

However, you can also use SVG, Font Awesome, or any other icon library you wish.

Styles

JavaScript instantiation

Variants

Leading and trailing icons can be applied to default or mdc-text-field--outlined Text Fields. To add an icon, add the relevant class (mdc-text-field--with-leading-icon and/or mdc-text-field--with-trailing-icon) to the root element, add an i element with your preferred icon, and give it a class of mdc-text-field__icon with the modifier mdc-text-field__icon--leading or mdc-text-field__icon--trailing.

NOTE: if you would like to display un-clickable icons, simply omit tabindex="0" and role="button", and the CSS will ensure the cursor is set to default, and that interacting with an icon doesn't do anything unexpected.

Leading icon

In text field:

In outlined text field:

Trailing icon

In text field:

In outlined text field:

Leading and trailing icons

In text field:

In outlined text field:

API

CSS classes

CSS ClassDescription
mdc-text-field__iconMandatory.
mdc-text-field__icon--leadingMandatory for leading icons.
mdc-text-field__icon--trailingMandatory for trailing icons.

Sass mixins

MixinDescription
leading-icon-color($color)Customizes the color for the leading icon in an enabled text-field.
trailing-icon-color($color)Customizes the color for the trailing icon in an enabled text-field.
disabled-icon-color($color)Customizes the color for the leading/trailing icons in a disabled text-field.
size($size)Sets the size of the leading and trailing icons.

MDCTextFieldIcon properties and methods

PropertyValue TypeDescription
foundationMDCTextFieldIconFoundationReturns the icon's foundation. This allows the parent MDCTextField component to access the public methods on the MDCTextFieldIconFoundation class.

Usage within frameworks

If you are using a JavaScript framework, such as React or Angular, you can create a Text Field Icon for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCTextFieldIconAdapter

Method SignatureDescription
getAttr(attr: string) => stringGets the value of an attribute on the icon element.
setAttr(attr: string, value: string) => voidSets an attribute with a given value on the icon element.
removeAttr(attr: string) => voidRemoves an attribute from the icon element.
setContent(content: string) => voidSets the text content of the icon element.
registerInteractionHandler(evtType: string, handler: EventListener) => voidRegisters an event listener for a given event.
deregisterInteractionHandler(evtType: string, handler: EventListener) => voidDeregisters an event listener for a given event.
notifyIconAction() => voidEmits a custom event "MDCTextField:icon" denoting a user has clicked the icon, which bubbles to the top-level text field element.

MDCTextFieldIconFoundation

Method SignatureDescription
setDisabled(disabled: boolean) => voidUpdates the icon's disabled state.
setAriaLabel(label: string) => voidUpdates the icon's aria-label.
setContent(content: string) => voidUpdates the icon's text content.
handleInteraction(evt: Event) => voidHandles a text field interaction event.