Search for a command to run...
No comments yet. Be the first to comment.
Looking to give your Oracle APEX mobile app a modern, native feel? Here’s a quick hack: add a floating action button that stays anchored at the bottom corner just like in popular mobile apps. This sma
APEX 26.1 has been updated to the Universal Theme. While much of the attention in this release is on AI features, I think the UT improvements are just as important for developers like me who care abou
The apex_barcode package offers a PL/SQL API to generate various types of barcodes. You can output barcodes as SVG (Scalable Vector Graphics) values or as PNG file blobs, making it easy to embed them
Oracle APEX makes it easy to get data on screen fast, but often, the default tabular output isn’t enough. What if you want to highlight statuses, add icons, or display badges all without writing compl
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 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.
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.
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.