Add more icons to APEX apps
Rodrigo is a Senior Oracle Developer at QV Systems. He is an experienced software engineer with emphasis in analysis, design and development of bespoke Oracle applications utilising development tools such as APEX, PL / SQL, jQuery, javaScript, CSS and JSON for a variety of international businesses. Rodrigo speaks regularly at Oracle community events and enjoys creating APEX plugins and writing blogs.
Oracle APEX already includes Font APEX as the default icon library for Universal Theme. In most cases, that is enough. But in one of my APEX apps, I needed a few icons that were not available there, so I looked for a simple way to extend the available options. In this post, I will show how to add Boxicons to Oracle APEX with minimal setup.
There are several icon libraries you could use, but for this example I chose Boxicons. It is lightweight, easy to add to an APEX application, and gives you access to a good range of free icons. You can use it with CSS classes such as bx, bxs, and bxl, or with its web component if you prefer cleaner HTML.
The quickest way to set it up is to add the Boxicons CSS files globally so they are available across the application.
In Oracle APEX, add the stylesheet in one of these places:
Application level: Shared Components > User Interface Attributes > Cascading Style Sheets > File URLs. This makes the icons available across the application.
Page level: Page Designer > CSS > File URLs, if you only want Boxicons on selected pages.
Theme Level: Shared Components > Themes > Edit Theme > Custom Library File URLs
https://cdn.boxicons.com/3.0.8/fonts/basic/boxicons.min.css
https://cdn.boxicons.com/3.0.8/fonts/filled/boxicons-filled.min.css
https://cdn.boxicons.com/3.0.8/fonts/brands/boxicons-brands.min.css
Once the stylesheet is loaded, using Boxicons is very similar to using icon CSS classes elsewhere in APEX. You simply find the icon class you want and assign it to the component.
If you prefer a cleaner HTML syntax, Boxicons also offers a web component. Their usage guide shows that after loading boxicons.js, you can render icons using <box-icon> with attributes for name, type, color, size, rotate, flip, border, and animation.
Add this JavaScript file at application level or page level:
https://unpkg.com/boxicons@2.1.4/dist/boxicons.js
You can then use the component in a Static Content region or HTML Expression, for example:
I found this approach most useful in Static Content regions and HTML Expressions, where APEX gives you full control over the markup.
Example: Static Content region
Example of a Static Content region:
This example shows that you can mix font-based icons and web-component icons on the same page without changing the rest of your APEX setup.
Notes for production use
For standard buttons and menu entries, I still prefer the CSS class approach because it fits naturally with native APEX properties.
The web component is cleaner in HTML, but it does require the JavaScript file to be loaded.
If your environment restricts external CDN resources, store the files locally in Application Static Files or Workspace Static Files instead.
For most applications, I would load the CSS globally unless only one or two pages need the extra icons.
Why I like this approach
I still use Font APEX by default, but Boxicons is a useful option when I need icons that are not available in the standard library. It is easy to add, works well with Oracle APEX, and gives a bit more flexibility for buttons, regions, cards, and custom HTML.
