Skip to content

Latest commit

 

History

History
 
 

icon

README.md

Text Field Icon

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

Design & API Documentation

Basic Usage

HTML Structure

<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>

Icon Set

We recommend using Material Icons from Google Fonts:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

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

Styles

@import "@material/textfield/icon/mdc-text-field-icon";

JavaScript Instantiation

import {MDCTextFieldIcon} from '@material/textfield/icon';

const icon = new MDCTextFieldIcon(document.querySelector('.mdc-text-field-icon'));

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:

<label class="mdc-text-field mdc-text-field--with-leading-icon">
  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
  <span class="mdc-floating-label" id="my-label-id">Your Name</span>
  <div class="mdc-line-ripple"></div>
</label>

In outlined text field:

<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
  <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
    <div class="mdc-notched-outline__notch">
      <span class="mdc-floating-label" id="my-label-id">Your Name</span>
    </div>
    <div class="mdc-notched-outline__trailing"></div>
  </div>
</label>

Trailing icon

In text field:

<label class="mdc-text-field mdc-text-field--with-trailing-icon">
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
  <span class="mdc-floating-label" id="my-label-id">Your Name</span>
  <div class="mdc-line-ripple"></div>
</label>

In outlined text field:

<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
  <div class="mdc-notched-outline">
    <div class="mdc-notched-outline__leading"></div>
    <div class="mdc-notched-outline__notch">
      <span class="mdc-floating-label" id="my-label-id">Your Name</span>
    </div>
    <div class="mdc-notched-outline__trailing"></div>
  </div>
</label>

Leading and Trailing icons

In text field:

<label class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">phone</i>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">event</i>
  <span class="mdc-floating-label" id="my-label-id">Phone Number</span>
  <div class="mdc-line-ripple"></div>
</label>

In outlined text field:

<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading">phone</i>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
  <i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">clear</i>
  <div class="mdc-notched-outline">
   <div class="mdc-notched-outline__leading"></div>
    <div class="mdc-notched-outline__notch">
      <span class="mdc-floating-label" id="my-label-id">Phone Number</span>
    </div>
    <div class="mdc-notched-outline__trailing"></div>
  </div>
</label>

Style Customization

CSS Classes

CSS Class Description
mdc-text-field__icon Mandatory.
mdc-text-field__icon--leading Mandatory for leading icons.
mdc-text-field__icon--trailing Mandatory for trailing icons.

Sass Mixins

Mixin Description
mdc-text-field-leading-icon-color($color) Customizes the color for the leading icon in an enabled text-field.
mdc-text-field-trailing-icon-color($color) Customizes the color for the trailing icon in an enabled text-field.
mdc-text-field-disabled-icon-color($color) Customizes the color for the leading/trailing icons in a disabled text-field.

MDCTextFieldIcon Properties and Methods

Property Value Type Description
foundation MDCTextFieldIconFoundation Returns 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 Signature Description
getAttr(attr: string) => string Gets the value of an attribute on the icon element.
setAttr(attr: string, value: string) => void Sets an attribute with a given value on the icon element.
removeAttr(attr: string) => void Removes an attribute from the icon element.
setContent(content: string) => void Sets the text content of the icon element.
registerInteractionHandler(evtType: string, handler: EventListener) => void Registers an event listener for a given event.
deregisterInteractionHandler(evtType: string, handler: EventListener) => void Deregisters an event listener for a given event.
notifyIconAction() => void Emits a custom event "MDCTextField:icon" denoting a user has clicked the icon, which bubbles to the top-level text field element.

MDCTextFieldIconFoundation

Method Signature Description
setDisabled(disabled: boolean) => void Updates the icon's disabled state.
setAriaLabel(label: string) => void Updates the icon's aria-label.
setContent(content: string) => void Updates the icon's text content.
handleInteraction(evt: Event) => void Handles a text field interaction event.