Every front-end developer has been here: an icon needs to be rotated by 15 degrees to match a design comp, so you write a one-off CSS class, add it to the element, and move on. Then another icon needs 30 degrees. Then 45. Before long, the stylesheet has a growing collection of single-purpose rotation rules with names like .rotate-phone-icon and .rotate-arrow-slightly that tell you nothing about the actual rotation value.
Odoo just eliminated that pattern from its theme system with a simple but effective approach: a SASS loop that generates rotation utility classes in 5-degree increments across the full 360-degree range. Need 15 degrees? There’s a class for that. Need 270? Same. No custom CSS required.
The Problem It Solves
The immediate trigger was the phone icon. Starting with version 19, Odoo needed to rotate the fa-phoneicon to match the visual language of its redesigned Phone app. The old approach would have been to write a dedicated CSS rule targeting that specific icon — quick, but inflexible. The next time any icon needed rotation, someone would write another rule.
Instead, the team implemented a SASS loop that iterates from 0 to 360 in steps of 5, generating a utility class for each increment. The result is a complete set of rotation classes that any element can use without touching the stylesheet. Apply the right class, get the right rotation. No build step, no custom CSS, no code review for a two-line style change.
How the Loop Works
The implementation is deliberately simple. A SASS @for loop generates classes following a predictable naming pattern, each applying a CSS transform: rotate() at the corresponding angle. At 5-degree granularity, this produces 72 utility classes that cover every practical rotation need.
The 5-degree step size hits a pragmatic sweet spot. Finer increments (1 degree) would generate 360 classes with most going unused. Coarser increments (15 or 45 degrees) wouldn’t cover the subtle adjustments that icon alignment often requires. Five degrees is precise enough for visual alignment while keeping the generated CSS lightweight.
Legacy Cleanup: Goodbye, Internet Explorer 9
Alongside the new rotation system, the update also strips out old CSS that existed solely to handle rotation issues in Internet Explorer 9. IE9’s lack of support for standard CSS transforms required vendor-prefixed workarounds and proprietary filter syntax that added weight to the stylesheet without benefiting any browser released in the last decade.
Removing this code isn’t just about file size — it’s about clarity. Developers reading the theme styles no longer need to wonder why rotation has multiple competing implementations or which one actually applies in modern browsers. One system, one set of classes, one behavior.
Beyond Phone Icons
While the phone icon was the catalyst, the utility classes work with any element that accepts CSS transforms. Navigation arrows that need to point in non-standard directions, status indicators that rotate to signal state changes, decorative elements in custom themes — all benefit from having rotation available as a class rather than an inline style or custom rule.
For theme developers building on top of Odoo’s base styles, this is the kind of infrastructure improvement that compounds. Every time someone needs a rotated element, they use an existing class instead of adding to the stylesheet. Over months of development, that avoidance adds up to meaningfully cleaner CSS.
A Pattern Worth Stealing
The broader lesson here isn’t specific to Odoo. Any design system that uses icons extensively should consider whether rotation utilities belong in its toolkit alongside spacing, color, and typography classes. The SASS loop approach makes it nearly free to implement — a few lines of code that generate a complete, predictable set of classes.
Tailwind CSS users will recognize the pattern immediately: utility classes generated from a configuration rather than written by hand. The difference is that Odoo is applying this thinking to its documentation theme specifically, where icon alignment across hundreds of technical pages makes consistency a genuine operational concern rather than an aesthetic preference.