X

Best Practices from Oracle Development's A‑Team

Redwood Theme Icons for Oracle Visual Builder

Maximilian Froeschl
A-Team - Cloud Solution Architect

In September 2020 Visual Builder introduced the Redwood Design as a new Visual Application feature. Part of this new Redwood Design is also a quite comprehensive icon font library.
While Visual Builder provides a variety of built-in icon images through the "Icon" component the gallery of Redwood Design icons has not made it into the Visual Builder Designer UI yet.
Nevertheless it is very easy to leverage the new Redwood Design icons in your Visual Applications built with Visual Builder.

A good overview of all available Redwood Theme icons is available on the Redwood Theme Icon Gallery in our Oracle CDN.

To be able to use those icons in Visual Builder you only need to add a stylesheet link (<link rel="stylesheet" href="https://static.oracle.com/cdn/fnd/gallery/2107.2.0/images/iconfont/ojuxIconFont.min.css">) into the <head> section of your Visual Application's index.html file:

Afterwards you can use the icons through icon css classes in your html elements:

ie. to use the "new-version" Redwood Theme icon in a html span tag:

 

  • drag&drop a span component from the Visual Builder Component Palette into your web page and add the class name "oj-ux-ico-new-version" to the class property of the span element

 

  • here you can also see how the generated code looks like

Easy, huh?

Welcome to our new Redwood Design icons in Visual Builder!

max@ateam
 

Join the discussion

Comments ( 1 )
  • Somesh Maurya Friday, April 16, 2021
    time to switch from apex font to this now :)
    thanks for useful info
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha