@font-face { font-family: "Storebrand Symbols"; src: url("../fonts/Symbols/StorebrandSymbols.eot") format("eot"), url("../fonts/Symbols/StorebrandSymbols.woff") format("woff"), url("../fonts/Symbols/StorebrandSymbols.woff2") format("wolf2"), url("../fonts/Symbols/StorebrandSymbols.ttf") format("truetype"); text-rendering: optimizeLegibility; } /* Taking control of the tag for icon purposes, and removing the natural italic behavior. Keeping regular behavior for tags with classes, because of collisions with storebrand icons */ i { font-family: "Storebrand Symbols" !important; font-style: normal; font-weight: normal; font-size: 1rem; line-height: 1rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Show a red box, if developers forget to add specify icon name as child. */ i:empty:not([class*="system-icon"]) { display: inline-flex; width: 1.5em; height: 1.5em; background: var(--p-color-red); } /* Old system-icon font for and , Note: will not load any font-files until actually used in markup */ @font-face { font-family: 'System-Icons'; src: url('../fonts/System-Icons/System-Icons.eot') format('eot'), url('../fonts/System-Icons/System-Icons.woff') format('woff'), url('../fonts/System-Icons/System-Icons.woff2') format('wolf2'), url('../fonts/System-Icons/System-Icons.ttf') format('truetype'); text-rendering: optimizeLegibility; } i.legacy, body[data-legacy-icons="true"] i { font-family: 'System-Icons' !important; }