1 |
|
2 | title: "Select icon"
|
3 | layout: detail
|
4 | section: components
|
5 | excerpt: "Icons describe the type of input a select requires"
|
6 | iconId: text_field
|
7 | path: /catalog/input-controls/select-menus/icon/
|
8 | -->
|
9 |
|
10 | # Select icon
|
11 |
|
12 | Icons 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 |
|
24 | We 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 |
|
32 | However, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.
|
33 |
|
34 | ### JavaScript instantiation
|
35 |
|
36 | ```js
|
37 | import {MDCSelectIcon} from '@material/select/icon';
|
38 |
|
39 | const icon = new MDCSelectIcon(document.querySelector('.mdc-select__icon'));
|
40 | ```
|
41 |
|
42 | ## Variants
|
43 |
|
44 | Leading 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 |
|
52 | In 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 |
|
83 | In 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 |
|
102 | CSS Class | Description
|
103 | --- | ---
|
104 | `mdc-select__icon` | Mandatory.
|
105 |
|
106 | ### Sass mixins
|
107 |
|
108 | Mixin | 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 |
|
116 | Property | 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 |
|
122 | If 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 |
|
126 | Method 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 |
|
138 | Method 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.
|