Display Oracle APEX Builder Icons

You’ve probably seen a few Icons around in Oracle APEX App Builder, etc

What if you could see all the icons in one go? - You can!

Just go to any APEX Builder page (you don’t even need to log in!) and paste this big wad of JavaScript into the console.

fetch(apex.env.APEX_FILES + 'apex_ui/css/Core.min.css?v=' + apex.env.APEX_VERSION)
  .then(response => response.text())
  .then(css => {
    // Extract all .a-Icon.icon-<name> classes
    const regex = /\.a-Icon\.icon-([a-zA-Z0-9_-]+)\b/g;
    let match, icons = [];
    while ((match = regex.exec(css)) !== null) {
      icons.push(match[1]);
    }
    icons = [...new Set(icons)];

    // Remove any previous dialog if re-running
    $('#apex-icon-inline-dialog').remove();

    // Build the table using Universal Theme classes
    let $table = $(`
      <table class="t-Report t-Report--static t-Report--stretch t-Report--altRows" style="width:100%;">
        <thead style="position:sticky;top:0;z-index:2;">
          <tr>
            <th class="t-Report-colHead">Class Name</th>
            <th class="t-Report-colHead">Rendered Icon</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    `);
    icons.forEach(cls => {
      let className = 'a-Icon icon-' + cls;
      let $row = $('<tr></tr>');
      $row.append('<td class="t-Report-cell" style="font-family:monospace;">' + className + '</td>');
      $row.append('<td class="t-Report-cell"><span class="' + className + '" style="font-size:2em;vertical-align:middle;"></span></td>');
      $table.find('tbody').append($row);
    });

    // Build the dialog markup with a scrollable table area and sticky header
    let $dialog = $(`
      <div id="apex-icon-inline-dialog"
           class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front a-Dialog a-Dialog--uiDialog"
           style="display:none;position:fixed;top:5vh;left:50%;transform:translateX(-50%);z-index:9999;width:90vw;max-width:1200px;height:80vh;min-height:300px;box-shadow:0 8px 32px #0005;background:inherit;">
        <div class="ui-dialog-titlebar ui-corner-all ui-widget-header a-Dialog-header"
             style="position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 24px;background:inherit;">
          <span class="ui-dialog-title a-Dialog-title" style="font-size:1.2em;font-weight:bold;">APEX Icon Classes</span>
          <button type="button" class="ui-dialog-titlebar-close a-Button a-Button--noLabel a-Button--icon a-Button--small"
                  title="Close" style="margin-left:auto;">
            <span class="a-Icon icon-close"></span>
          </button>
        </div>
        <div class="a-Dialog-body" style="height:calc(80vh - 48px);overflow:auto;padding:0 16px;">
          <!-- Table will be injected here -->
        </div>
      </div>
    `);

    // Insert the table into the dialog body
    $dialog.find('.a-Dialog-body').append($table);

    // Add the dialog to the page
    $('body').append($dialog);

    // Show the dialog
    $dialog.show();

    // Close dialog on close button click
    $dialog.find('.ui-dialog-titlebar-close').on('click', function() {
      $dialog.remove();
      $(document).off('keydown.apexIconDialog');
    });

    // Close dialog on Escape key
    $(document).on('keydown.apexIconDialog', function(e) {
      if (e.key === "Escape") {
        $dialog.remove();
        $(document).off('keydown.apexIconDialog');
      }
    });
  });

Can I use them in my APEX Applications? No. Well, not without some custom CSSing. However Font-APEX should provide for your icon needs.

So, whats the point of this blog? Not a lot, just curiosity. Although some advanced APEX Developers may find a use for this - I have a future use 😉so stay tuned.

ENJOY!

What’s the picture? Chillies for sale.