[docs]: note which elements require icon import maps

We should document on UX dot each case in which pf icon is used. The default behaviour in pf-icon is to import icons from bare import specifiers, so users will need to either apply an import map or override the default behaviour. (We should also bear in mind https://github.com/patternfly/patternfly-elements/discussions/2765)

ripgrep tells us where are all the references to pf-icon in our element sources

$ rg pf-icon -g 'elements/*/*.ts' -g '!elements/*/*.d.ts'
elements/rh-stat/rh-stat.ts
27: * @cssprop --pf-icon--size
76:            <pf-icon size=${this.size === 'default' ? 'md' : 'lg'}
78:                     set="${ifDefined(this.getAttribute('icon-set') ?? undefined)}"></pf-icon>`}
90:    this.querySelector('pf-icon[slot="icon"]')

elements/rh-tag/rh-tag.ts
10:import '@patternfly/elements/pf-icon/pf-icon.js';
44: * @cssprop --pf-icon--size
76:          <pf-icon ?hidden="${!icon}"
77:                   .icon="${icon || undefined as unknown as string}"></pf-icon>

elements/rh-back-to-top/rh-back-to-top.ts
8:import '@patternfly/elements/pf-icon/pf-icon.js';
90:        <pf-icon icon="angle-up" set="fas"></pf-icon>

elements/rh-cta/rh-cta.ts
15:import '@patternfly/elements/pf-icon/pf-icon.js';
192:        <pf-icon icon=${this.icon} size="md" set="far"></pf-icon>` : ''}
194:        <pf-icon icon=${this.icon} size="md" set="far"></pf-icon>` : this.variant ? '' : html`

elements/rh-tabs/rh-tabs.ts
208:              <pf-icon icon="angle-left" set="fas" loading="eager"></pf-icon>
220:              <pf-icon icon="angle-right" set="fas" loading="eager"></pf-icon>

elements/rh-tabs/rh-tab.ts
34: * @slot icon - Can contain an `<svg>` or `<pf-icon>`

elements/rh-subnav/rh-subnav.ts
14:import '@patternfly/elements/pf-icon/pf-icon.js';
123:          <pf-icon size="sm"
126:                   loading="eager"></pf-icon>
133:          <pf-icon icon="${scrollIconRight}" set="${scrollIconSet}" loading="eager"></pf-icon>

elements/rh-footer/rh-footer-social-link.ts
32:      /* Temporary fix for x-twitter icon and pf-icon not supporting that icon given font awesome v5 */
38:        newDiv.innerHTML = `<pf-icon icon="${this.icon ?? ''}"
40:                                    loading="eager">${newDiv.innerHTML}</pf-icon>`;

elements/rh-tile/rh-tile.ts
14:import '@patternfly/elements/pf-icon/pf-icon.js';
208:              html`<pf-icon icon="${ifDefined(this.icon)}" size="md" set="far"></pf-icon>`
228:              <pf-icon icon="arrow-right" size="md" set="fas"></pf-icon>` : !this.checkable ? html`

elements/rh-footer/rh-footer.ts
8:import '@patternfly/elements/pf-icon/pf-icon.js';

Thanks to @zhawkins for raising this issue in office hours

RedHat-UX / red-hat-design-system

[docs]: note which elements require icon import maps #1584