UNPKG

5.72 kBMarkdownView Raw
1<!--docs:
2title: "Select icon"
3layout: detail
4section: components
5excerpt: "Icons describe the type of input a select requires"
6iconId: text_field
7path: /catalog/input-controls/select-menus/icon/
8-->
9
10# Select icon
11
12Icons describe the type of input a select requires. They can also be interaction targets.
13
14## Basic usage
15
16### HTML structure
17
18```html
19<i class="material-icons mdc-select__icon" tabindex="0" role="button">event</i>
20```
21
22#### Icon set
23
24We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:
25
26```html
27<head>
28 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
29</head>
30```
31
32However, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.
33
34### JavaScript instantiation
35
36```js
37import {MDCSelectIcon} from '@material/select/icon';
38
39const icon = new MDCSelectIcon(document.querySelector('.mdc-select__icon'));
40```
41
42## Variants
43
44Leading icons can be applied to default or `mdc-select--outlined` Selects. To add a leading icon, add the class `mdc-select--with-leading-icon` to the root element, add an `i` element with your preferred icon as a child of the `mdc-select__anchor` element, and give it a class of `mdc-select__icon`.
45
46> **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.
47
48### Leading icon
49
50> **NOTE:** when using leading icons in select anchor, also include an empty `<span class="mdc-deprecated-list-item__graphic"></span>` in each list item.
51
52In filled select:
53
54```html
55<div class="mdc-select mdc-select--filled mdc-select--with-leading-icon">
56 <div class="mdc-select__anchor">
57 <span class="mdc-select__ripple"></span>
58 <span class="mdc-floating-label">Pick a Food Group</span>
59 <i class="material-icons mdc-select__icon" tabindex="0" role="button">event</i>
60 ...
61 </div>
62 <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
63 <ul class="mdc-deprecated-list" role="listbox">
64 <li class="mdc-deprecated-list-item mdc-deprecated-list-item--selected" aria-selected="true" role="option" data-value="grains">
65 <span class="mdc-deprecated-list-item__ripple"></span>
66 <span class="mdc-deprecated-list-item__graphic"></span>
67 <span class="mdc-deprecated-list-item__text">Bread, Cereal, Rice, and Pasta</span>
68 </li>
69 <li class="mdc-deprecated-list-item" role="option" data-value="vegetables">
70 <span class="mdc-deprecated-list-item__ripple"></span>
71 <span class="mdc-deprecated-list-item__graphic"></span>
72 <span class="mdc-deprecated-list-item__text">Vegetables</span>
73 </li>
74 <li class="mdc-deprecated-list-item" role="option" data-value="fruit">
75 <span class="mdc-deprecated-list-item__ripple"></span>
76 <span class="mdc-deprecated-list-item__graphic"></span>
77 <span class="mdc-deprecated-list-item__text">Fruit</span>
78 </li>
79 </ul>
80</div>
81```
82
83In outlined select:
84
85```html
86<div class="mdc-select mdc-select--outlined mdc-select--with-leading-icon">
87 <div class="mdc-select__anchor">
88 <span class="mdc-notched-outline">
89 ...
90 </span>
91 <i class="material-icons mdc-select__icon" tabindex="0" role="button">event</i>
92 ...
93 </div>
94 <!-- The rest of the select markup, see above. -->
95</div>
96```
97
98## API
99
100### CSS classes
101
102CSS Class | Description
103--- | ---
104`mdc-select__icon` | Mandatory.
105
106### Sass mixins
107
108Mixin | Description
109--- | ---
110`size($size)` | Customizes the size (both width and height) of the icon.
111`icon-color($color)` | Customizes the color for the leading icon.
112`disabled-icon-color($color)` | Customizes the color for the leading icon when disabled.
113
114## `MDCSelectIcon` properties and methods
115
116Property | Value Type | Description
117--- | --- | ---
118`foundation` | `MDCSelectIconFoundation` | Returns the icon's foundation. This allows the parent `MDCSelect` component to access the public methods on the `MDCSelectIconFoundation` class.
119
120## Usage within frameworks
121
122If you are using a JavaScript framework, such as React or Angular, you can create a Select 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](../../../docs/integrating-into-frameworks.md).
123
124### `MDCSelectIconAdapter`
125
126Method Signature | Description
127--- | ---
128`getAttr(attr: string) => string` | Gets the value of an attribute on the icon element.
129`setAttr(attr: string, value: string) => void` | Sets an attribute with a given value on the icon element.
130`removeAttr(attr: string) => void` | Removes an attribute from the icon element.
131`setContent(content: string) => void` | Sets the text content of the icon element.
132`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.
133`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.
134`notifyIconAction() => void` | Emits a custom event "MDCSelect:icon" denoting a user has clicked the icon, which bubbles to the top-level select element.
135
136### `MDCSelectIconFoundation`
137
138Method Signature | Description
139--- | ---
140`setDisabled(disabled: boolean) => void` | Updates the icon's disabled state.
141`setAriaLabel(label: string) => void` | Updates the icon's aria-label.
142`setContent(content: string) => void` | Updates the icon's text content.
143`handleInteraction(evt: Event) => void` | Handles a select interaction event.