How to use @carbon/icons - 10 common examples

render() {
    const { selected, selectionName, selectionValue, selectionIconTitle } = this;
    if (selectionName) {
      // "Selected" style with `.bx--structured-list-td` does not work somehow - Need investigation
      return html`
        
        <input value="${ifDefined(selectionValue)}" name="${selectionName}" class="${prefix}--structured-list-input" type="radio" id="input">
        <div class="${prefix}--structured-list-td ${prefix}--structured-list-cell">
          ${CheckmarkFilled16({
            class: `${prefix}--structured-list-svg`,
            title: selectionIconTitle,
          })}
        </div>
      `;
    }
    return html`
      
    `;
  }

render() {
    const { disabled, section, selected, selectionLabel, selectionName, selectionValue } = this;
    const expando = !section
      ? undefined
      : html`
          <div class="${prefix}--table-expand">
            <button class="${prefix}--table-expand__button">
              ${ChevronRight16({ class: `${prefix}--table-expand__svg` })}
            </button>
          </div>
        `;
    // Using `@click` instead of `@change` to support `.preventDefault()`
    const selection = !selectionName
      ? undefined
      : html`
          <div class="${prefix}--table-column-checkbox">
            ${html`
              </div>

render() {
    const { formatLabelText, formatSupplementalText, total, value, _handleChange: handleChange } = this;
    return html`
      <div class="${prefix}--select__page-number">
        <label class="${prefix}--label ${prefix}--visually-hidden" for="select">
          ${formatLabelText({ count: total })}
        </label>
        <select class="${prefix}--select-input" id="select">
          ${Array.from(new Array(total)).map(
            (_item, index) =&gt; html`
              <option value="${index}">${index + 1}</option>
            `
          )}
        </select>
        ${ChevronDown16({ class: `${prefix}--select__arrow` })}
      </div>
      <span class="${prefix}--pagination__text">
        ${formatSupplementalText({ count: total })}
      </span>
    `;
  }

});
    return html`
      <div aria-controls="tablist" aria-owns="tablist" aria-haspopup="listbox" aria-expanded="${String(open)}" aria-labelledby="trigger-label" class="${triggerClasses}" role="button" id="trigger">
        <span class="${prefix}--tabs-trigger-text" id="trigger-label">
          ${selectedItemContent || triggerContent}
        </span>
        ${ChevronDown16({ 'aria-hidden': 'true' })}
      </div>
      <ul class="${listClasses}" role="tablist" id="tablist">
        
      </ul>
      <div aria-relevant="additions text" aria-live="assertive" role="status" class="${prefix}--assistive-text">
        ${assistiveStatusText}
      </div>
    `;
  }

render() {
    const { collapsedAssistiveText, expandedAssistiveText, expanded } = this;
    const assistiveText = expanded ? expandedAssistiveText : collapsedAssistiveText;
    return html`
      <button aria-labelledby="icon" class="${prefix}--tile__chevron">
        ${ChevronDown16({
          id: 'icon',
          alt: assistiveText,
          description: assistiveText,
          'aria-label': assistiveText,
        })}
      </button>
      <div class="${prefix}--tile-content">
        
      </div>
    `;
  }

<div class="${classes}" role="listbox">
        ${validityIcon}
        <div aria-controls="menu-body" aria-owns="menu-body" aria-haspopup="listbox" aria-expanded="${String(open)}" aria-labelledby="trigger-label" tabindex="${ifDefined(!shouldTriggerBeFocusable ? undefined : '0')}" class="${prefix}--list-box__field" role="${ifDefined(!shouldTriggerBeFocusable ? undefined : 'button')}">
          ${this._renderPrecedingTriggerContent()}${this._renderTriggerContent()}${this._renderFollowingTriggerContent()}
          <div class="${iconContainerClasses}">
            ${ChevronDown16({ 'aria-label': toggleLabel })}
          </div>
        </div>
        ${menuBody}
      </div>
      ${validity}
      <div aria-relevant="additions text" aria-live="assertive" role="status" class="${prefix}--assistive-text">
        ${assistiveStatusText}
      </div>
    `;
  }

render() {
    const { labelText, value, _handleChange: handleChange, _handleSlotChange: handleSlotChange } = this;
    return html`
      <label class="${prefix}--pagination__text" for="select">${labelText}</label>
      <div class="${prefix}--select__item-count">
        <select class="${prefix}--select-input" id="select"></select>
        ${ChevronDown16({ class: `${prefix}--select__arrow` })}
      </div>
      <div hidden=""></div>
    `;
  }

private _renderIcon() {
    const { status } = this;
    if (status === INLINE_LOADING_STATE.ERROR) {
      return Error20({
        class: `${prefix}--inline-loading--error`,
      });
    }
    if (status === INLINE_LOADING_STATE.FINISHED) {
      return CheckmarkFilled16({
        class: `${prefix}--inline-loading__checkmark-container ${prefix}--inline-loading__svg`,
      });
    }
    if (status === INLINE_LOADING_STATE.INACTIVE || status === INLINE_LOADING_STATE.ACTIVE) {
      const classes = classMap({
        [`${prefix}--loading ${prefix}--loading--small`]: true,
        [`${prefix}--loading--stop`]: status === INLINE_LOADING_STATE.INACTIVE,
      });
      return html`
        <div class="${classes}">
          ${getLoadingIcon({ type: LOADING_TYPE.SMALL })}
        </div>
      `;
    }
    return undefined;
  }

render() {
    const { checkmarkLabel, name, selected, value, _inputType: inputType, _handleChange: handleChange } = this;
    return html`
      <input value="${ifNonNull(value)}" name="${ifNonNull(name)}" tabindex="-1" class="${prefix}--tile-input" id="input" type="${inputType}">
      <label tabindex="0" class="${prefix}--tile ${prefix}--tile--selectable" for="input">
        <div class="${prefix}--tile__checkmark">
          ${CheckmarkFilled16({
            children: !checkmarkLabel ? undefined : svg`<title>${checkmarkLabel}</title>`,
          })}
        </div>
        <div class="${prefix}--tile-content"></div>
      </label>
    `;
  }

render() {
    const { active, buttonLabelActive, buttonLabelInactive, disabled, _handleClick: handleClick } = this;
    const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;
    const classes = classMap({
      [`${prefix}--header__action`]: true,
      [`${prefix}--header__menu-trigger`]: true,
      [`${prefix}--header__menu-toggle`]: true,
      [`${prefix}--header__action--active`]: active,
    });
    return html`
      <button aria-label="${ifNonNull(buttonLabel)}" class="${classes}">
        ${active ? Close20() : Menu20()}
      </button>
    `;
  }