Select field should allow for custom icons

[afberg]

Is your feature request related to a problem? Please describe. For users who don't want to rely on an icon font it would be great if the mwc-select component could support external icons via slotting — much like the mwc-button component.

Describe the solution you'd like If a user adds an icon inside the mwc-select component by using the slot="icon" attribute, it should render the icon in the position where icons rendered using the icon attribute would be rendered.

<mwc-select>
  <svg slot="icon">
    ...
  </svg>
   ...
</mwc-select>

Describe alternatives you've considered Currently, there is no other way I know of to get non icon font icons in the mwc-select.

Additional context

[afberg]

For anyone else waiting for this, this is what we use to get around it — extending the class. It's essentially a fork and likely to break on updates of the underlying library, but it's a temporary solution at least.

@customElement('icon-select')
export class IconSelect extends Select {
  public renderLeadingIcon(): TemplateResult<1> {
    /**
     * Forces correct spacing in underlying element
     */
    this.icon = 'yes';

    return html`
      <slot
        name="icon"
        style=${styleMap({
          margin: '0 8px',
          position: 'relative',
          top: '6px',
        })}
      ></slot>
    `;
  }
}

[simonh1000]

I used <mwc-list-item value="3"><i class="mdi mdi-camera"></i> Option 3</mwc-list-item> in my markup and the icon showed in the dropdown, but not when the element was contracted

What's missing is a way of declaring a value, and a display value separately

https://user-images.githubusercontent.com/5256724/139525152-979d5091-b446-4f2c-95be-0272f54a69b1.mov

[asyncliz]

Should be fixed in M3