From 20b8e3513232ba8676048cef1d3da6bbc43afb5c Mon Sep 17 00:00:00 2001 From: Greg Lorenzen Date: Mon, 8 Jul 2024 16:29:31 +0000 Subject: [PATCH] Revert material-icons CSS classes Add new material-symbols classes for Material Symbols fonts --- client/assets/fonts.css | 54 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/client/assets/fonts.css b/client/assets/fonts.css index d04b499f..92f8222d 100644 --- a/client/assets/fonts.css +++ b/client/assets/fonts.css @@ -12,7 +12,36 @@ src: url(~static/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2) format('woff2'); } +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(~static/fonts/MaterialIcons.woff2) format('woff2'); +} + +@font-face { + font-family: 'Material Icons Outlined'; + font-style: normal; + font-weight: 400; + src: url(~static/fonts/MaterialIconsOutlined.woff2) format('woff2'); +} + .material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-smoothing: antialiased; + vertical-align: top; +} + +.material-symbols { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; @@ -27,11 +56,30 @@ vertical-align: top; } +.material-symbols.fill { + font-variation-settings: + 'FILL' 1 +} + .material-icons:not([class*="text-"]) { font-size: 1.5rem; } .material-icons-outlined { + font-family: 'Material Icons Outlined'; + font-weight: normal; + font-style: normal; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-smoothing: antialiased; +} + +.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; @@ -43,6 +91,12 @@ word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; + vertical-align: top; +} + +.material-symbols-outlined.fill { + font-variation-settings: + 'FILL' 1 } .material-icons-outlined:not([class*="text-"]) {