How to use the @carbon/icons/lib/chevron--down/16 function in @carbon/icons

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>
    `;
  }