Styling: Icons

Oracle® JavaScript Extension Toolkit (JET)
15.1.0
F83698-01

Description

Style classes for the Icons


.oj-clickable-icon
JET supports sass variables like $iconColorDefault, $iconColorHover, $iconColorActive, etc. When this class is used in conjunction with icon fonts the variable values will be used for default/hover/active/etc. WARNING: this class is contextual, the colors will be seen if any ancestor is either a link or uses marker classes like oj-default, oj-hover, oj-active, etc.
Example
<a href="http://www.oracle.com">
   <span class="oj-clickable-icon demo-icon-font demo-home-icon-24">
   </span> home
</a>
.oj-clickable-icon-nocontext
The class is not contextual, so it must go directly on the anchor or on element with markers oj-default, oj-hover, oj-active, etc.
Example
<a href="http://www.oracle.com">
   <span class="oj-clickable-icon-nocontext demo-icon-font demo-home-icon-24">
   </span> home
</a>
.oj-fwk-icon
Framework icons are deprecated.
Deprecated:
Since Description
9.0.0 Internal Oracle teams should replace with Redwood icons, external teams may want to use apex (https://apex.oracle.com/fontapex/) or font awesome (https://fontawesome.com/icons)
.oj-icon
In high contrast mode (an accessibility setting for people with low visual acuity) background images will disappear on some browsers. ".oj-icon" has default values set for using css to show a high contrast icon (like a default height, width, etc). You can use the "oj-icon-content" mixin to generate a selector with additions/overrides. The generated css can be used in conjunction with ".oj-icon" for images that will work in high contrast mode.
Example
<div class="oj-icon demo-gear" role="img" aria-label="gear"></div>

Category: Framework Icon

Framework icons are deprecated.

Class template:

.oj-fwk-icon-[fwk-icon]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [fwk-icon]

Value (required) Name Description
arrow-e arrow-e arrow-e
arrow-n arrow-n arrow-n
arrow-ne arrow-ne arrow-ne
arrow-nw arrow-nw arrow-nw
arrow-s arrow-s arrow-s
arrow-se arrow-se arrow-se
arrow-sw arrow-sw arrow-sw
arrow-w arrow-w arrow-w
arrow02-e arrow02-e arrow02-e
arrow02-n arrow02-n arrow02-n
arrow02-ne arrow02-ne arrow02-ne
arrow02-nw arrow02-nw arrow02-nw
arrow02-s arrow02-s arrow02-s
arrow02-se arrow02-se arrow02-se
arrow02-sw arrow02-sw arrow02-sw
arrow02-w arrow02-w arrow02-w
arrow03-e arrow03-e arrow03-e
arrow03-n arrow03-n arrow03-n
arrow03-ne arrow03-ne arrow03-ne
arrow03-nw arrow03-nw arrow03-nw
arrow03-s arrow03-s arrow03-s
arrow03-se arrow03-se arrow03-se
arrow03-sw arrow03-sw arrow03-sw
arrow03-w arrow03-w arrow03-w
arrowtail-e arrowtail-e arrowtail-e
arrowtail-n arrowtail-n arrowtail-n
arrowtail-s arrowtail-s arrowtail-s
arrowtail-w arrowtail-w arrowtail-w
back back back
next next next
calendar-clock calendar-clock calendar-clock
calendar calendar calendar
clock clock clock
caret-e caret-e caret-e
caret-n caret-n caret-n
caret-s caret-s caret-s
caret-w caret-w caret-w
caret02-e caret02-e caret02-e
caret02-n caret02-n caret02-n
caret02-s caret02-s caret02-s
caret02-w caret02-w caret02-w
caret02end-e caret02end-e caret02end-e
caret02end-n caret02end-n caret02end-n
caret02end-s caret02end-s caret02end-s
caret02end-w caret02end-w caret02end-w
caret03-e caret03-e caret03-e
caret03-n caret03-n caret03-n
caret03-s caret03-s caret03-s
caret03-w caret03-w caret03-w
checkbox-off checkbox-off checkbox-off
checkbox-on checkbox-on checkbox-on
checkmark checkmark checkmark
corner-drag corner-drag corner-drag
cross cross cross
cross02 cross02 cross02
cross03 cross03 cross03
dots-horizontal dots-horizontal dots-horizontal
dots-vertical dots-vertical dots-vertical
drag-horizontal drag-horizontal drag-horizontal
drag-vertical drag-vertical drag-vertical
drag drag drag
folderhierarchy folderhierarchy folderhierarchy
grid grid grid
hamburger hamburger hamburger
help help help
info info info
list list list
magnifier magnifier magnifier
marquee marquee marquee
maximize maximize maximize
message-confirmation message-confirmation message-confirmation
message-error message-error message-error
message-info message-info message-info
message-warning message-warning message-warning
minimize minimize minimize
minus minus minus
node-collapse node-collapse node-collapse
node-expand node-expand node-expand
pan pan pan
plus plus plus
radiobutton-off radiobutton-off radiobutton-off
radiobutton-on radiobutton-on radiobutton-on
sort sort sort
sortrelevancehigh sortrelevancehigh sortrelevancehigh
tree-document tree-document tree-document
tree-folder-collapsed tree-folder-collapsed tree-folder-collapsed
tree-folder-open tree-folder-open tree-folder-open
tristate-partial tristate-partial tristate-partial
users users users
warning warning warning
zoom-in zoom-in zoom-in
zoom-out zoom-out zoom-out

Deprecated:
Since Description
9.0.0 Internal Oracle teams should replace with Redwood icons, external teams may want to use apex (https://apex.oracle.com/fontapex/) or font awesome (https://fontawesome.com/icons)

Category: Icon Colors

Sets the color for icon font icons. In Redwood these classes use the !important rule.

Class template:

.oj-icon-color-[icon-color]

Note: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.

Values for [icon-color]

Value (required) Name Description
primary Primary icon color Primary icon color
secondary Secondary icon color Secondary icon color
disabled Disabled icon color Disabled icon color
danger Danger icon color Danger icon color
warning Warning icon color Warning icon color
success Success icon color Success icon color
info Success icon color Success icon color

Example
<span class="oj-icon-color-secondary oj-ux-ico-heart-s"
            role="img" aria-label="heart"></span>