How to copy the icon name used by an entity

Configuration Frontend
1

I recently updated my main installation from version 2025.12.x to 2026.2.3. Now I can’t figure a way to copy the icon name used by an entity. Previously, I would open the “More Info” dialog and copy it there (either directly or from the icon picker). But now I can’t select text anywhere.

2

What kind of entity it is?
Can you post a more-info for it?

3

obraz
obraz607×460 16.6 KB

I used this method to search and preview icons, which I do quite often when designing a piece of UI: press E, pick random entity, click “settings” (cog), look for an icon, and just close that window. Or perhaps you know of another handy way to quickly search for icons with the option to copy them?

4

The easiest way to find a required icon is here:

1 Like
5

FYI: there is also a browser extension GitHub - Pictogrammers/Browser-Icon-Picker: A cute Material Design Icons icon picker for your web browser.

6

Thanks guys, I ended up using a custom button with an embedded icon picker to copy the selected icon’s name to the clipboard. Works with my Firefox, can’t say for other browsers.

Code 
type: custom:button-card
name: Search for icons, copy to clipboard
custom_fields:
  picker: |
    [[[
      function toClipboard(text) {
        if ("clipboard" in navigator && typeof navigator.clipboard.writeText === "function") {
          // Chrome
          return navigator.clipboard.writeText(text)
            .then(() => true)
            .catch(() => false);
        } else {
          // Firefox
          const input = document.createElement("input");
          input.value = text;
          input.style.position = "fixed";
          input.style.top = "-2000px";
          document.body.appendChild(input);
          input.select();
          try {
            return Promise.resolve(document.execCommand("copy"))
              .then(res => {
                document.body.removeChild(input);
                return res;
              });
          } catch (err) {
            return Promise.resolve(false);
          }
        }
      };
      const btn = this;
      function reportResult(success,icon) {
        const color = success ? 'var(--success-color)' : 'var(--error-color)';
        const el = btn.shadowRoot?.querySelector('#my-icon');
        if (el) {
          el.setAttribute('icon',icon);
          el.style.setProperty('color',color);
          el.style.setProperty('display','block');
          setTimeout(() => {
            el.style.setProperty('display','none');
          }, 1000);
        }
      };

      return html`
        <div style='display:flex;gap:12px;align-items:center'>
          <ha-icon-picker
          style="width:280px;"
          @value-changed=${(e) => {
            const icon = e.detail.value;
            toClipboard(icon)
            .then(() => reportResult(true,icon))
            .catch(() => reportResult(false,icon));
          }}
          >
          </ha-icon-picker>
          <div>
            <ha-icon id="my-icon" icon="mdi:checkbox-marked-outline" style="width:42px;display:none">
            </ha-icon>
          <div>
        </div>  
        `;
    ]]]
styles:
  card:
    - pointer-events: auto
  grid:
    - display: flex
    - flex-direction: column
    - gap: 8px
    - align-items: start
  name:
    - align-self: start
    - font-size: 16px