Sizing Component-Embedded Icons Using "%" Instead of "px"

Ignition
,
6

This appears to mostly work. I only am handling bottom and left dock pushes, as that is all I have pushing. My right is cover, and I don't use a top.

I set the variables elsewhere in rem units.

Push docks have to be un-resizable. If you figure out how to handle resizing, let me know.

/* =========================================================================
   DOCKED VIEW SIZING
   ========================================================================= */
.docked-view.docked-view-left { width: var(--left-dock-width) !important; }  
.docked-view.docked-view-left[style*="left: -"],
.docked-view.docked-view-left[style*="left:-"] {
    left: calc(-1 * var(--left-dock-width)) !important;
}
.docked-view.docked-view-right { width: var(--right-dock-width) !important; }
.docked-view.docked-view-right[style*="right: -"],
.docked-view.docked-view-right[style*="right:-"] {
    right: calc(-1 * var(--right-dock-width)) !important;
}
.docked-view.docked-view-bottom { height: var(--bottom-dock-height) !important; }
.docked-view.docked-view-bottom[style*="bottom: -"],
.docked-view.docked-view-bottom[style*="bottom:-"] {
    bottom: calc(-1 * var(--bottom-dock-height)) !important;
}
.docked-view.docked-view-top { height: var(--top-dock-height) !important; }
.docked-view.docked-view-top[style*="top: -"],
.docked-view.docked-view-top[style*="top:-"] {
    top: calc(-1 * var(--top-dock-height)) !important;
}

/* Catch Left/Right docks when Bottom is pushing, regardless of Designer px settings */
.docked-view.docked-view-left:not([style*="height: calc(100% - 20px)"]),
.docked-view.docked-view-right:not([style*="height: calc(100% - 20px)"]) {
    height: calc(100% - var(--bottom-dock-height) - 0px) !important; 
}

/* Adjust main view to deal with dock widths */
.center:not([style*="max-height: calc(100% - 20px)"]) {
    max-height: calc(100% - var(--bottom-dock-height) - 0px) !important;
    margin-bottom: var(--bottom-dock-height) !important;
}
.center:not([style*="max-width: calc(100% + 0px)"]) {
    max-width: calc(100% - var(--left-dock-width)) !important;
    margin-left: var(--left-dock-width) !important;
}