chef 3745 Posted September 27, 2020 Share Posted September 27, 2020 (edited) These icons are scalable, and it switches up the dashboard a bit. You can cut and paste this into to the custom CSS section under settings in the server: I marked the Css, so if there is an update it will be easy to replace! Choose a color for your icons: you can replace "rgba(0,0,0,0.5)" with whatever you want (example: black/white/red, or an rgba value). /*Custom Icons start*/ /*https://materialdesignicons.com/*/ /*Version 1.2*/ /*positioning, size and color*/ :root{ --iconColor: rgba(0,0,0,0.5) !important; --iconWidth: 22px; --iconHeight: 22px; --iconTop: 10px; } a[href="/notificationsettings.html"] i.md-icon.navMenuOptionIcon { content: '' ; visibility: hidden; } a[href="/notificationsettings.html"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M22 12.41V4C22 2.9 21.11 2 20 2H4C2.9 2 2 2.89 2 4V22L6 18H9.29C10.15 20.89 12.83 23 16 23C19.86 23 23 19.87 23 16C23 14.69 22.63 13.46 22 12.41M5.17 16L4 17.17V4H20V10.26C18.86 9.47 17.5 9 16 9C14.1 9 12.37 9.77 11.11 11H6V13H9.69C9.25 13.91 9 14.93 9 16H5.17M16 20.85C13.32 20.85 11.15 18.68 11.15 16S13.32 11.15 16 11.15C18.67 11.15 20.85 13.32 20.85 16S18.67 20.85 16 20.85M18 9H6V7H18V9M16.5 15.82L18.94 17.23L18.19 18.53L15 16.69V13H16.5V15.82Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M22 12.41V4C22 2.9 21.11 2 20 2H4C2.9 2 2 2.89 2 4V22L6 18H9.29C10.15 20.89 12.83 23 16 23C19.86 23 23 19.87 23 16C23 14.69 22.63 13.46 22 12.41M5.17 16L4 17.17V4H20V10.26C18.86 9.47 17.5 9 16 9C14.1 9 12.37 9.77 11.11 11H6V13H9.69C9.25 13.91 9 14.93 9 16H5.17M16 20.85C13.32 20.85 11.15 18.68 11.15 16S13.32 11.15 16 11.15C18.67 11.15 20.85 13.32 20.85 16S18.67 20.85 16 20.85M18 9H6V7H18V9M16.5 15.82L18.94 17.23L18.19 18.53L15 16.69V13H16.5V15.82Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/embypremiere"] i.md-icon.navMenuOptionIcon { content: '' ; visibility: hidden; } a[href="/embypremiere"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M20,2H4V4L9.81,8.36C6.14,9.57 4.14,13.53 5.35,17.2C6.56,20.87 10.5,22.87 14.19,21.66C17.86,20.45 19.86,16.5 18.65,12.82C17.95,10.71 16.3,9.05 14.19,8.36L20,4V2M14.94,19.5L12,17.78L9.06,19.5L9.84,16.17L7.25,13.93L10.66,13.64L12,10.5L13.34,13.64L16.75,13.93L14.16,16.17L14.94,19.5Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M20,2H4V4L9.81,8.36C6.14,9.57 4.14,13.53 5.35,17.2C6.56,20.87 10.5,22.87 14.19,21.66C17.86,20.45 19.86,16.5 18.65,12.82C17.95,10.71 16.3,9.05 14.19,8.36L20,4V2M14.94,19.5L12,17.78L9.06,19.5L9.84,16.17L7.25,13.93L10.66,13.64L12,10.5L13.34,13.64L16.75,13.93L14.16,16.17L14.94,19.5Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=DiskSpacePluginConfigurationPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=DiskSpacePluginConfigurationPage"] i.md-icon.navMenuOptionIcon:before { -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M6, 2H18A2, 2 0 0, 1 20, 4V20A2, 2 0 0, 1 18, 22H6A2, 2 0 0, 1 4, 20V4A2, 2 0 0, 1 6, 2M12, 4A6, 6 0 0, 0 6, 10C6, 13.31 8.69, 16 12.1, 16L11.22, 13.77C10.95, 13.29 11.11, 12.68 11.59, 12.4L12.45, 11.9C12.93, 11.63 13.54, 11.79 13.82, 12.27L15.74, 14.69C17.12, 13.59 18, 11.9 18, 10A6, 6 0 0, 0 12, 4M12, 9A1, 1 0 0, 1 13, 10A1, 1 0 0, 1 12, 11A1, 1 0 0, 1 11, 10A1, 1 0 0, 1 12, 9M7, 18A1, 1 0 0, 0 6, 19A1, 1 0 0, 0 7, 20A1, 1 0 0, 0 8, 19A1, 1 0 0, 0 7, 18M12.09, 13.27L14.58, 19.58L17.17, 18.08L12.95, 12.77L12.09, 13.27Z' /></svg>"); mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M6, 2H18A2, 2 0 0, 1 20, 4V20A2, 2 0 0, 1 18, 22H6A2, 2 0 0, 1 4, 20V4A2, 2 0 0, 1 6, 2M12, 4A6, 6 0 0, 0 6, 10C6, 13.31 8.69, 16 12.1, 16L11.22, 13.77C10.95, 13.29 11.11, 12.68 11.59, 12.4L12.45, 11.9C12.93, 11.63 13.54, 11.79 13.82, 12.27L15.74, 14.69C17.12, 13.59 18, 11.9 18, 10A6, 6 0 0, 0 12, 4M12, 9A1, 1 0 0, 1 13, 10A1, 1 0 0, 1 12, 11A1, 1 0 0, 1 11, 10A1, 1 0 0, 1 12, 9M7, 18A1, 1 0 0, 0 6, 19A1, 1 0 0, 0 7, 20A1, 1 0 0, 0 8, 19A1, 1 0 0, 0 7, 18M12.09, 13.27L14.58, 19.58L17.17, 18.08L12.95, 12.77L12.09, 13.27Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=MainPluginConfigurationPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=MainPluginConfigurationPage"] i.md-icon.navMenuOptionIcon:before { content: 'router'; visibility: visible; position: absolute; } a[href="/conversions?mode=convert"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/conversions?mode=convert"] i.md-icon.navMenuOptionIcon:before { -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2 12A10 10 0 1 0 12 2A10 10 0 0 0 2 12M15.6 13.72A4 4 0 0 0 16 12A4 4 0 0 0 12 8V10L8.88 7L12 4V6A6 6 0 0 1 18 12A5.9 5.9 0 0 1 17.07 15.19M6 12A5.9 5.9 0 0 1 6.93 8.81L8.4 10.28A4 4 0 0 0 8 12A4 4 0 0 0 12 16V14L15 17L12 20V18A6 6 0 0 1 6 12Z' /></svg>"); mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2 12A10 10 0 1 0 12 2A10 10 0 0 0 2 12M15.6 13.72A4 4 0 0 0 16 12A4 4 0 0 0 12 8V10L8.88 7L12 4V6A6 6 0 0 1 18 12A5.9 5.9 0 0 1 17.07 15.19M6 12A5.9 5.9 0 0 1 6.93 8.81L8.4 10.28A4 4 0 0 0 8 12A4 4 0 0 0 12 16V14L15 17L12 20V18A6 6 0 0 1 6 12Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=dlnasettings"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=dlnasettings"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M21.38, 12.56H12.85C11.97, 12.56 11.1, 12.96 10.61, 13.61V13.6C10.12, 14.28 9.32, 14.72 8.41, 14.72C6.92, 14.72 5.71, 13.5 5.71, 12C5.71, 10.5 6.92, 9.31 8.41, 9.31C9.32, 9.31 10.12, 9.75 10.61, 10.43V10.42C11.1, 11.07 11.97, 11.5 12.85, 11.5H21.29C21.45, 11.5 22, 11.4 22, 10.67C21.26, 6.43 17.1, 3.18 12.06, 3.18C8.96, 3.18 6.19, 4.41 4.34, 6.35C4.05, 6.79 4.35, 6.92 4.63, 6.96H10.14C11, 6.96 11.89, 6.54 12.38, 5.89V5.91C12.88, 5.23 13.67, 4.78 14.58, 4.78C16.07, 4.78 17.28, 6 17.28, 7.5C17.28, 9 16.07, 10.2 14.58, 10.2C13.67, 10.2 12.88, 9.75 12.38, 9.07V9.08C11.89, 8.44 11, 8.03 10.14, 8.03H4.13L4.15, 8.03C4.15, 8.03 3.26, 8 2.72, 8.75C2.3, 9.42 2, 10.85 2, 12C2, 13.16 2.17, 14.21 2.72, 15.27C3.19, 16.03 4.15, 16 4.15, 16H4.11L10.14, 16C11, 16 11.89, 15.58 12.38, 14.93V14.94C12.88, 14.26 13.67, 13.81 14.58, 13.81C16.07, 13.81 17.28, 15.03 17.28, 16.5C17.28, 18 16.07, 19.23 14.58, 19.23C13.67, 19.23 12.88, 18.78 12.38, 18.1V18.12C11.89, 17.47 11, 17.05 10.14, 17.05H4.64C4.36, 17.09 4.06, 17.22 4.32, 17.64C6.17, 19.58 8.95, 20.82 12.06, 20.82C17.11, 20.82 21.28, 17.57 22, 13.31C22, 12.72 21.59, 12.58 21.38, 12.56' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M21.38, 12.56H12.85C11.97, 12.56 11.1, 12.96 10.61, 13.61V13.6C10.12, 14.28 9.32, 14.72 8.41, 14.72C6.92, 14.72 5.71, 13.5 5.71, 12C5.71, 10.5 6.92, 9.31 8.41, 9.31C9.32, 9.31 10.12, 9.75 10.61, 10.43V10.42C11.1, 11.07 11.97, 11.5 12.85, 11.5H21.29C21.45, 11.5 22, 11.4 22, 10.67C21.26, 6.43 17.1, 3.18 12.06, 3.18C8.96, 3.18 6.19, 4.41 4.34, 6.35C4.05, 6.79 4.35, 6.92 4.63, 6.96H10.14C11, 6.96 11.89, 6.54 12.38, 5.89V5.91C12.88, 5.23 13.67, 4.78 14.58, 4.78C16.07, 4.78 17.28, 6 17.28, 7.5C17.28, 9 16.07, 10.2 14.58, 10.2C13.67, 10.2 12.88, 9.75 12.38, 9.07V9.08C11.89, 8.44 11, 8.03 10.14, 8.03H4.13L4.15, 8.03C4.15, 8.03 3.26, 8 2.72, 8.75C2.3, 9.42 2, 10.85 2, 12C2, 13.16 2.17, 14.21 2.72, 15.27C3.19, 16.03 4.15, 16 4.15, 16H4.11L10.14, 16C11, 16 11.89, 15.58 12.38, 14.93V14.94C12.88, 14.26 13.67, 13.81 14.58, 13.81C16.07, 13.81 17.28, 15.03 17.28, 16.5C17.28, 18 16.07, 19.23 14.58, 19.23C13.67, 19.23 12.88, 18.78 12.38, 18.1V18.12C11.89, 17.47 11, 17.05 10.14, 17.05H4.64C4.36, 17.09 4.06, 17.22 4.32, 17.64C6.17, 19.58 8.95, 20.82 12.06, 20.82C17.11, 20.82 21.28, 17.57 22, 13.31C22, 12.72 21.59, 12.58 21.38, 12.56' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=webhooks"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=webhooks"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M10.46, 19C9, 21.07 6.15, 21.59 4.09, 20.15C2.04, 18.71 1.56, 15.84 3, 13.75C3.87, 12.5 5.21, 11.83 6.58, 11.77L6.63, 13.2C5.72, 13.27 4.84, 13.74 4.27, 14.56C3.27, 16 3.58, 17.94 4.95, 18.91C6.33, 19.87 8.26, 19.5 9.26, 18.07C9.57, 17.62 9.75, 17.13 9.82, 16.63V15.62L15.4, 15.58L15.47, 15.47C16, 14.55 17.15, 14.23 18.05, 14.75C18.95, 15.27 19.26, 16.43 18.73, 17.35C18.2, 18.26 17.04, 18.58 16.14, 18.06C15.73, 17.83 15.44, 17.46 15.31, 17.04L11.24, 17.06C11.13, 17.73 10.87, 18.38 10.46, 19M17.74, 11.86C20.27, 12.17 22.07, 14.44 21.76, 16.93C21.45, 19.43 19.15, 21.2 16.62, 20.89C15.13, 20.71 13.9, 19.86 13.19, 18.68L14.43, 17.96C14.92, 18.73 15.75, 19.28 16.75, 19.41C18.5, 19.62 20.05, 18.43 20.26, 16.76C20.47, 15.09 19.23, 13.56 17.5, 13.35C16.96, 13.29 16.44, 13.36 15.97, 13.53L15.12, 13.97L12.54, 9.2H12.32C11.26, 9.16 10.44, 8.29 10.47, 7.25C10.5, 6.21 11.4, 5.4 12.45, 5.44C13.5, 5.5 14.33, 6.35 14.3, 7.39C14.28, 7.83 14.11, 8.23 13.84, 8.54L15.74, 12.05C16.36, 11.85 17.04, 11.78 17.74, 11.86M8.25, 9.14C7.25, 6.79 8.31, 4.1 10.62, 3.12C12.94, 2.14 15.62, 3.25 16.62, 5.6C17.21, 6.97 17.09, 8.47 16.42, 9.67L15.18, 8.95C15.6, 8.14 15.67, 7.15 15.27, 6.22C14.59, 4.62 12.78, 3.85 11.23, 4.5C9.67, 5.16 8.97, 7 9.65, 8.6C9.93, 9.26 10.4, 9.77 10.97, 10.11L11.36, 10.32L8.29, 15.31C8.32, 15.36 8.36, 15.42 8.39, 15.5C8.88, 16.41 8.54, 17.56 7.62, 18.05C6.71, 18.54 5.56, 18.18 5.06, 17.24C4.57, 16.31 4.91, 15.16 5.83, 14.67C6.22, 14.46 6.65, 14.41 7.06, 14.5L9.37, 10.73C8.9, 10.3 8.5, 9.76 8.25, 9.14Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M10.46, 19C9, 21.07 6.15, 21.59 4.09, 20.15C2.04, 18.71 1.56, 15.84 3, 13.75C3.87, 12.5 5.21, 11.83 6.58, 11.77L6.63, 13.2C5.72, 13.27 4.84, 13.74 4.27, 14.56C3.27, 16 3.58, 17.94 4.95, 18.91C6.33, 19.87 8.26, 19.5 9.26, 18.07C9.57, 17.62 9.75, 17.13 9.82, 16.63V15.62L15.4, 15.58L15.47, 15.47C16, 14.55 17.15, 14.23 18.05, 14.75C18.95, 15.27 19.26, 16.43 18.73, 17.35C18.2, 18.26 17.04, 18.58 16.14, 18.06C15.73, 17.83 15.44, 17.46 15.31, 17.04L11.24, 17.06C11.13, 17.73 10.87, 18.38 10.46, 19M17.74, 11.86C20.27, 12.17 22.07, 14.44 21.76, 16.93C21.45, 19.43 19.15, 21.2 16.62, 20.89C15.13, 20.71 13.9, 19.86 13.19, 18.68L14.43, 17.96C14.92, 18.73 15.75, 19.28 16.75, 19.41C18.5, 19.62 20.05, 18.43 20.26, 16.76C20.47, 15.09 19.23, 13.56 17.5, 13.35C16.96, 13.29 16.44, 13.36 15.97, 13.53L15.12, 13.97L12.54, 9.2H12.32C11.26, 9.16 10.44, 8.29 10.47, 7.25C10.5, 6.21 11.4, 5.4 12.45, 5.44C13.5, 5.5 14.33, 6.35 14.3, 7.39C14.28, 7.83 14.11, 8.23 13.84, 8.54L15.74, 12.05C16.36, 11.85 17.04, 11.78 17.74, 11.86M8.25, 9.14C7.25, 6.79 8.31, 4.1 10.62, 3.12C12.94, 2.14 15.62, 3.25 16.62, 5.6C17.21, 6.97 17.09, 8.47 16.42, 9.67L15.18, 8.95C15.6, 8.14 15.67, 7.15 15.27, 6.22C14.59, 4.62 12.78, 3.85 11.23, 4.5C9.67, 5.16 8.97, 7 9.65, 8.6C9.93, 9.26 10.4, 9.77 10.97, 10.11L11.36, 10.32L8.29, 15.31C8.32, 15.36 8.36, 15.42 8.39, 15.5C8.88, 16.41 8.54, 17.56 7.62, 18.05C6.71, 18.54 5.56, 18.18 5.06, 17.24C4.57, 16.31 4.91, 15.16 5.83, 14.67C6.22, 14.46 6.65, 14.41 7.06, 14.5L9.37, 10.73C8.9, 10.3 8.5, 9.76 8.25, 9.14Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=opensubtitles"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=opensubtitles"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M5, 4C4.45, 4 4, 4.18 3.59, 4.57C3.2, 4.96 3, 5.44 3, 6V18C3, 18.56 3.2, 19.04 3.59, 19.43C4, 19.82 4.45, 20 5, 20H19C19.5, 20 20, 19.81 20.39, 19.41C20.8, 19 21, 18.53 21, 18V6C21, 5.47 20.8, 5 20.39, 4.59C20, 4.19 19.5, 4 19, 4H5M4.5, 5.5H19.5V18.5H4.5V5.5M7, 9C6.7, 9 6.47, 9.09 6.28, 9.28C6.09, 9.47 6, 9.7 6, 10V14C6, 14.3 6.09, 14.53 6.28, 14.72C6.47, 14.91 6.7, 15 7, 15H10C10.27, 15 10.5, 14.91 10.71, 14.72C10.91, 14.53 11, 14.3 11, 14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11, 9.7 10.91, 9.47 10.71, 9.28C10.5, 9.09 10.27, 9 10, 9H7M14, 9C13.73, 9 13.5, 9.09 13.29, 9.28C13.09, 9.47 13, 9.7 13, 10V14C13, 14.3 13.09, 14.53 13.29, 14.72C13.5, 14.91 13.73, 15 14, 15H17C17.3, 15 17.53, 14.91 17.72, 14.72C17.91, 14.53 18, 14.3 18, 14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18, 9.7 17.91, 9.47 17.72, 9.28C17.53, 9.09 17.3, 9 17, 9H14Z'/></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M5, 4C4.45, 4 4, 4.18 3.59, 4.57C3.2, 4.96 3, 5.44 3, 6V18C3, 18.56 3.2, 19.04 3.59, 19.43C4, 19.82 4.45, 20 5, 20H19C19.5, 20 20, 19.81 20.39, 19.41C20.8, 19 21, 18.53 21, 18V6C21, 5.47 20.8, 5 20.39, 4.59C20, 4.19 19.5, 4 19, 4H5M4.5, 5.5H19.5V18.5H4.5V5.5M7, 9C6.7, 9 6.47, 9.09 6.28, 9.28C6.09, 9.47 6, 9.7 6, 10V14C6, 14.3 6.09, 14.53 6.28, 14.72C6.47, 14.91 6.7, 15 7, 15H10C10.27, 15 10.5, 14.91 10.71, 14.72C10.91, 14.53 11, 14.3 11, 14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11, 9.7 10.91, 9.47 10.71, 9.28C10.5, 9.09 10.27, 9 10, 9H7M14, 9C13.73, 9 13.5, 9.09 13.29, 9.28C13.09, 9.47 13, 9.7 13, 10V14C13, 14.3 13.09, 14.53 13.29, 14.72C13.5, 14.91 13.73, 15 14, 15H17C17.3, 15 17.53, 14.91 17.72, 14.72C17.91, 14.53 18, 14.3 18, 14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18, 9.7 17.91, 9.47 17.72, 9.28C17.53, 9.09 17.3, 9 17, 9H14Z'/></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=cinemamode"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=cinemamode"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M20.84 2.18L16.91 2.96L19.65 6.5L21.62 6.1L20.84 2.18M13.97 3.54L12 3.93L14.75 7.46L16.71 7.07L13.97 3.54M9.07 4.5L7.1 4.91L9.85 8.44L11.81 8.05L9.07 4.5M4.16 5.5L3.18 5.69A2 2 0 0 0 1.61 8.04L2 10L6.9 9.03L4.16 5.5M2 10V20C2 21.11 2.9 22 4 22H20C21.11 22 22 21.11 22 20V10H2Z'/></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M20.84 2.18L16.91 2.96L19.65 6.5L21.62 6.1L20.84 2.18M13.97 3.54L12 3.93L14.75 7.46L16.71 7.07L13.97 3.54M9.07 4.5L7.1 4.91L9.85 8.44L11.81 8.05L9.07 4.5M4.16 5.5L3.18 5.69A2 2 0 0 0 1.61 8.04L2 10L6.9 9.03L4.16 5.5M2 10V20C2 21.11 2.9 22 4 22H20C21.11 22 22 21.11 22 20V10H2Z'/></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/logs"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/logs"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M8, 12H16V14H8V12M10, 20H6V4H13V9H18V12.1L20, 10.1V8L14, 2H6A2, 2 0 0, 0 4, 4V20A2, 2 0 0, 0 6, 22H10V20M8, 18H12.1L13, 17.1V16H8V18M20.2, 13C20.3, 13 20.5, 13.1 20.6, 13.2L21.9, 14.5C22.1, 14.7 22.1, 15.1 21.9, 15.3L20.9, 16.3L18.8, 14.2L19.8, 13.2C19.9, 13.1 20, 13 20.2, 13M20.2, 16.9L14.1, 23H12V20.9L18.1, 14.8L20.2, 16.9Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M8, 12H16V14H8V12M10, 20H6V4H13V9H18V12.1L20, 10.1V8L14, 2H6A2, 2 0 0, 0 4, 4V20A2, 2 0 0, 0 6, 22H10V20M8, 18H12.1L13, 17.1V16H8V18M20.2, 13C20.3, 13 20.5, 13.1 20.6, 13.2L21.9, 14.5C22.1, 14.7 22.1, 15.1 21.9, 15.3L20.9, 16.3L18.8, 14.2L19.8, 13.2C19.9, 13.1 20, 13 20.2, 13M20.2, 16.9L14.1, 23H12V20.9L18.1, 14.8L20.2, 16.9Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/scheduledtasks"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/scheduledtasks"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M4 2V8H2V2H4M2 22V16H4V22H2M5 12C5 13.11 4.11 14 3 14C1.9 14 1 13.11 1 12C1 10.9 1.9 10 3 10C4.11 10 5 10.9 5 12M16 4C20.42 4 24 7.58 24 12C24 16.42 20.42 20 16 20C12.4 20 9.36 17.62 8.35 14.35L6 12L8.35 9.65C9.36 6.38 12.4 4 16 4M15 13L19.53 15.79L20.33 14.5L16.5 12.2V7H15V13Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M4 2V8H2V2H4M2 22V16H4V22H2M5 12C5 13.11 4.11 14 3 14C1.9 14 1 13.11 1 12C1 10.9 1.9 10 3 10C4.11 10 5 10.9 5 12M16 4C20.42 4 24 7.58 24 12C24 16.42 20.42 20 16 20C12.4 20 9.36 17.62 8.35 14.35L6 12L8.35 9.65C9.36 6.38 12.4 4 16 4M15 13L19.53 15.79L20.33 14.5L16.5 12.2V7H15V13Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/dashboard"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/dashboard"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2, 5V19H8V5H2M9, 5V10H15V5H9M16, 5V14H22V5H16M9, 11V19H15V11H9M16, 15V19H22V15H16Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2, 5V19H8V5H2M9, 5V10H15V5H9M16, 5V14H22V5H16M9, 11V19H15V11H9M16, 15V19H22V15H16Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/users"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/users"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/metadatamanager"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/metadatamanager"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 2A10, 10 0 0, 0 2, 12A10, 10 0 0, 0 12, 22A10, 10 0 0, 0 22, 12H20A8, 8 0 0, 1 12, 20A8, 8 0 0, 1 4, 12A8, 8 0 0, 1 12, 4V2M18.78, 3C18.61, 3 18.43, 3.07 18.3, 3.2L17.08, 4.41L19.58, 6.91L20.8, 5.7C21.06, 5.44 21.06, 5 20.8, 4.75L19.25, 3.2C19.12, 3.07 18.95, 3 18.78, 3M16.37, 5.12L9, 12.5V15H11.5L18.87, 7.62L16.37, 5.12Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 2A10, 10 0 0, 0 2, 12A10, 10 0 0, 0 12, 22A10, 10 0 0, 0 22, 12H20A8, 8 0 0, 1 12, 20A8, 8 0 0, 1 4, 12A8, 8 0 0, 1 12, 4V2M18.78, 3C18.61, 3 18.43, 3.07 18.3, 3.2L17.08, 4.41L19.58, 6.91L20.8, 5.7C21.06, 5.44 21.06, 5 20.8, 4.75L19.25, 3.2C19.12, 3.07 18.95, 3 18.78, 3M16.37, 5.12L9, 12.5V15H11.5L18.87, 7.62L16.37, 5.12Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=AutoOrganizeLog"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=AutoOrganizeLog"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=TorrentPluginConfigurationPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=TorrentPluginConfigurationPage"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M14,8H11V14H6V8H3L8.5,2L14,8M15.5,22L21,16H18V10H13V16H10L15.5,22Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M14,8H11V14H6V8H3L8.5,2L14,8M15.5,22L21,16H18V10H13V16H10L15.5,22Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=AlexaPluginConfigurationPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=AlexaPluginConfigurationPage"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10.43,21.87V19.91C10.43,19.22 10,18.57 9.35,18.3C6.91,17.26 5.17,14.83 5.17,12C5.17,8.26 8.22,5.17 12,5.17C15.78,5.17 18.83,8.26 18.83,12C18.83,16.43 15.39,20.61 10.43,21.87Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10.43,21.87V19.91C10.43,19.22 10,18.57 9.35,18.3C6.91,17.26 5.17,14.83 5.17,12C5.17,8.26 8.22,5.17 12,5.17C15.78,5.17 18.83,8.26 18.83,12C18.83,16.43 15.39,20.61 10.43,21.87Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/devices"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/devices"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M3 6H21V4H3C1.9 4 1 4.9 1 6V18C1 19.1 1.9 20 3 20H7V18H3V6M13 12H9V13.78C8.39 14.33 8 15.11 8 16C8 16.89 8.39 17.67 9 18.22V20H13V18.22C13.61 17.67 14 16.88 14 16S13.61 14.33 13 13.78V12M11 17.5C10.17 17.5 9.5 16.83 9.5 16S10.17 14.5 11 14.5 12.5 15.17 12.5 16 11.83 17.5 11 17.5M22 8H16C15.5 8 15 8.5 15 9V19C15 19.5 15.5 20 16 20H22C22.5 20 23 19.5 23 19V9C23 8.5 22.5 8 22 8M21 18H17V10H21V18Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M3 6H21V4H3C1.9 4 1 4.9 1 6V18C1 19.1 1.9 20 3 20H7V18H3V6M13 12H9V13.78C8.39 14.33 8 15.11 8 16C8 16.89 8.39 17.67 9 18.22V20H13V18.22C13.61 17.67 14 16.88 14 16S13.61 14.33 13 13.78V12M11 17.5C10.17 17.5 9.5 16.83 9.5 16S10.17 14.5 11 14.5 12.5 15.17 12.5 16 11.83 17.5 11 17.5M22 8H16C15.5 8 15 8.5 15 9V19C15 19.5 15.5 20 16 20H22C22.5 20 23 19.5 23 19V9C23 8.5 22.5 8 22 8M21 18H17V10H21V18Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/librarysetup/library.html"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/librarysetup/library.html"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M18, 6V17H22V6M2, 17H6V6H2M7, 19H17V4H7V19Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M18, 6V17H22V6M2, 17H6V6H2M7, 19H17V4H7V19Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/plugins"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/plugins"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M21.4 7.5C22.2 8.3 22.2 9.6 21.4 10.3L18.6 13.1L10.8 5.3L13.6 2.5C14.4 1.7 15.7 1.7 16.4 2.5L18.2 4.3L21.2 1.3L22.6 2.7L19.6 5.7L21.4 7.5M15.6 13.3L14.2 11.9L11.4 14.7L9.3 12.6L12.1 9.8L10.7 8.4L7.9 11.2L6.4 9.8L3.6 12.6C2.8 13.4 2.8 14.7 3.6 15.4L5.4 17.2L1.4 21.2L2.8 22.6L6.8 18.6L8.6 20.4C9.4 21.2 10.7 21.2 11.4 20.4L14.2 17.6L12.8 16.2L15.6 13.3Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M21.4 7.5C22.2 8.3 22.2 9.6 21.4 10.3L18.6 13.1L10.8 5.3L13.6 2.5C14.4 1.7 15.7 1.7 16.4 2.5L18.2 4.3L21.2 1.3L22.6 2.7L19.6 5.7L21.4 7.5M15.6 13.3L14.2 11.9L11.4 14.7L9.3 12.6L12.1 9.8L10.7 8.4L7.9 11.2L6.4 9.8L3.6 12.6C2.8 13.4 2.8 14.7 3.6 15.4L5.4 17.2L1.4 21.2L2.8 22.6L6.8 18.6L8.6 20.4C9.4 21.2 10.7 21.2 11.4 20.4L14.2 17.6L12.8 16.2L15.6 13.3Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/transcoding"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/transcoding"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M3, 17V19H9V17H3M3, 5V7H13V5H3M13, 21V19H21V17H13V15H11V21H13M7, 9V11H3V13H7V15H9V9H7M21, 13V11H11V13H21M15, 9H17V7H21V5H17V3H15V9Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M3, 17V19H9V17H3M3, 5V7H13V5H3M13, 21V19H21V17H13V15H11V21H13M7, 9V11H3V13H7V15H9V9H7M21, 13V11H11V13H21M15, 9H17V7H21V5H17V3H15V9Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/network"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/network"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M13, 19H14A1, 1 0 0, 1 15, 20H22V22H15A1, 1 0 0, 1 14, 23H10A1, 1 0 0, 1 9, 22H2V20H9A1, 1 0 0, 1 10, 19H11V17H4A1, 1 0 0, 1 3, 16V12A1, 1 0 0, 1 4, 11H20A1, 1 0 0, 1 21, 12V16A1, 1 0 0, 1 20, 17H13V19M4, 3H20A1, 1 0 0, 1 21, 4V8A1, 1 0 0, 1 20, 9H4A1, 1 0 0, 1 3, 8V4A1, 1 0 0, 1 4, 3M9, 7H10V5H9V7M9, 15H10V13H9V15M5, 5V7H7V5H5M5, 13V15H7V13H5Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M13, 19H14A1, 1 0 0, 1 15, 20H22V22H15A1, 1 0 0, 1 14, 23H10A1, 1 0 0, 1 9, 22H2V20H9A1, 1 0 0, 1 10, 19H11V17H4A1, 1 0 0, 1 3, 16V12A1, 1 0 0, 1 4, 11H20A1, 1 0 0, 1 21, 12V16A1, 1 0 0, 1 20, 17H13V19M4, 3H20A1, 1 0 0, 1 21, 4V8A1, 1 0 0, 1 20, 9H4A1, 1 0 0, 1 3, 8V4A1, 1 0 0, 1 4, 3M9, 7H10V5H9V7M9, 15H10V13H9V15M5, 5V7H7V5H5M5, 13V15H7V13H5Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=reports"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=reports"] i.md-icon.navMenuOptionIcon:before { content: 'bubble_chart'; visibility: visible; position: absolute; } a[href="configurationpage?name=activity_report"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=activity_report"] i.md-icon.navMenuOptionIcon:before { content: 'show_chart'; visibility: visible; position: absolute; } /*Custom Icons End*/ Edited September 27, 2020 by chef 2 Link to comment Share on other sites More sharing options...
kaj 241 Posted September 27, 2020 Share Posted September 27, 2020 Wow, thanks..that's a lot of work......one small problem....I use a dark theme, and this happens: 1 Link to comment Share on other sites More sharing options...
chef 3745 Posted September 27, 2020 Author Share Posted September 27, 2020 (edited) 2 minutes ago, kaj said: Wow, thanks..that's a lot of work......one small problem....I use a dark theme, and this happens: try adding svg { color: white !important; } if that doesn't work try: svg { fill: white; } I didn't make these icons I just figured out the css Edited September 27, 2020 by chef Link to comment Share on other sites More sharing options...
kaj 241 Posted September 27, 2020 Share Posted September 27, 2020 6 minutes ago, chef said: if that doesn't work try: Thanks for the quick responses. Unfortunately, is doesn't seem to work. Even on a light theme the icons appear a lighter grey than the icons that don't change. It's not biggie.... Link to comment Share on other sites More sharing options...
chef 3745 Posted September 27, 2020 Author Share Posted September 27, 2020 47 minutes ago, kaj said: Thanks for the quick responses. Unfortunately, is doesn't seem to work. Even on a light theme the icons appear a lighter grey than the icons that don't change. It's not biggie.... @kaj Wow, I got stumped with code LOL! It is difficult to target a pseudo element when it is an svg... LOL! I'm not sure why. I did however create a custom bunch of code for you that will enable the icons in white: /*Custom Icons start*/ /*https://materialdesignicons.com/*/ a[href="/notificationsettings.html"] i.md-icon.navMenuOptionIcon { content: '' ; visibility: hidden; } a[href="/notificationsettings.html"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M22 12.41V4C22 2.9 21.11 2 20 2H4C2.9 2 2 2.89 2 4V22L6 18H9.29C10.15 20.89 12.83 23 16 23C19.86 23 23 19.87 23 16C23 14.69 22.63 13.46 22 12.41M5.17 16L4 17.17V4H20V10.26C18.86 9.47 17.5 9 16 9C14.1 9 12.37 9.77 11.11 11H6V13H9.69C9.25 13.91 9 14.93 9 16H5.17M16 20.85C13.32 20.85 11.15 18.68 11.15 16S13.32 11.15 16 11.15C18.67 11.15 20.85 13.32 20.85 16S18.67 20.85 16 20.85M18 9H6V7H18V9M16.5 15.82L18.94 17.23L18.19 18.53L15 16.69V13H16.5V15.82Z' /></svg>"); visibility: visible; position:absolute; display:block; width: 21px; margin-left: -2px; top:23%; } a[href="/embypremiere"] i.md-icon.navMenuOptionIcon { content: '' ; visibility: hidden; } a[href="/embypremiere"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M20,2H4V4L9.81,8.36C6.14,9.57 4.14,13.53 5.35,17.2C6.56,20.87 10.5,22.87 14.19,21.66C17.86,20.45 19.86,16.5 18.65,12.82C17.95,10.71 16.3,9.05 14.19,8.36L20,4V2M14.94,19.5L12,17.78L9.06,19.5L9.84,16.17L7.25,13.93L10.66,13.64L12,10.5L13.34,13.64L16.75,13.93L14.16,16.17L14.94,19.5Z' /></svg>"); visibility: visible; position:absolute; display:block; width: 21px; margin-left: -2px; top:23%; } a[href="configurationpage?name=DiskSpacePluginConfigurationPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=DiskSpacePluginConfigurationPage"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M6, 2H18A2, 2 0 0, 1 20, 4V20A2, 2 0 0, 1 18, 22H6A2, 2 0 0, 1 4, 20V4A2, 2 0 0, 1 6, 2M12, 4A6, 6 0 0, 0 6, 10C6, 13.31 8.69, 16 12.1, 16L11.22, 13.77C10.95, 13.29 11.11, 12.68 11.59, 12.4L12.45, 11.9C12.93, 11.63 13.54, 11.79 13.82, 12.27L15.74, 14.69C17.12, 13.59 18, 11.9 18, 10A6, 6 0 0, 0 12, 4M12, 9A1, 1 0 0, 1 13, 10A1, 1 0 0, 1 12, 11A1, 1 0 0, 1 11, 10A1, 1 0 0, 1 12, 9M7, 18A1, 1 0 0, 0 6, 19A1, 1 0 0, 0 7, 20A1, 1 0 0, 0 8, 19A1, 1 0 0, 0 7, 18M12.09, 13.27L14.58, 19.58L17.17, 18.08L12.95, 12.77L12.09, 13.27Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="configurationpage?name=MainPluginConfigurationPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=MainPluginConfigurationPage"] i.md-icon.navMenuOptionIcon:before { content: 'router'; visibility: visible; position: absolute; } a[href="/conversions?mode=convert"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/conversions?mode=convert"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M2 12A10 10 0 1 0 12 2A10 10 0 0 0 2 12M15.6 13.72A4 4 0 0 0 16 12A4 4 0 0 0 12 8V10L8.88 7L12 4V6A6 6 0 0 1 18 12A5.9 5.9 0 0 1 17.07 15.19M6 12A5.9 5.9 0 0 1 6.93 8.81L8.4 10.28A4 4 0 0 0 8 12A4 4 0 0 0 12 16V14L15 17L12 20V18A6 6 0 0 1 6 12Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="configurationpage?name=dlnasettings"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=dlnasettings"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M21.38, 12.56H12.85C11.97, 12.56 11.1, 12.96 10.61, 13.61V13.6C10.12, 14.28 9.32, 14.72 8.41, 14.72C6.92, 14.72 5.71, 13.5 5.71, 12C5.71, 10.5 6.92, 9.31 8.41, 9.31C9.32, 9.31 10.12, 9.75 10.61, 10.43V10.42C11.1, 11.07 11.97, 11.5 12.85, 11.5H21.29C21.45, 11.5 22, 11.4 22, 10.67C21.26, 6.43 17.1, 3.18 12.06, 3.18C8.96, 3.18 6.19, 4.41 4.34, 6.35C4.05, 6.79 4.35, 6.92 4.63, 6.96H10.14C11, 6.96 11.89, 6.54 12.38, 5.89V5.91C12.88, 5.23 13.67, 4.78 14.58, 4.78C16.07, 4.78 17.28, 6 17.28, 7.5C17.28, 9 16.07, 10.2 14.58, 10.2C13.67, 10.2 12.88, 9.75 12.38, 9.07V9.08C11.89, 8.44 11, 8.03 10.14, 8.03H4.13L4.15, 8.03C4.15, 8.03 3.26, 8 2.72, 8.75C2.3, 9.42 2, 10.85 2, 12C2, 13.16 2.17, 14.21 2.72, 15.27C3.19, 16.03 4.15, 16 4.15, 16H4.11L10.14, 16C11, 16 11.89, 15.58 12.38, 14.93V14.94C12.88, 14.26 13.67, 13.81 14.58, 13.81C16.07, 13.81 17.28, 15.03 17.28, 16.5C17.28, 18 16.07, 19.23 14.58, 19.23C13.67, 19.23 12.88, 18.78 12.38, 18.1V18.12C11.89, 17.47 11, 17.05 10.14, 17.05H4.64C4.36, 17.09 4.06, 17.22 4.32, 17.64C6.17, 19.58 8.95, 20.82 12.06, 20.82C17.11, 20.82 21.28, 17.57 22, 13.31C22, 12.72 21.59, 12.58 21.38, 12.56' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="configurationpage?name=webhooks"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=webhooks"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M10.46, 19C9, 21.07 6.15, 21.59 4.09, 20.15C2.04, 18.71 1.56, 15.84 3, 13.75C3.87, 12.5 5.21, 11.83 6.58, 11.77L6.63, 13.2C5.72, 13.27 4.84, 13.74 4.27, 14.56C3.27, 16 3.58, 17.94 4.95, 18.91C6.33, 19.87 8.26, 19.5 9.26, 18.07C9.57, 17.62 9.75, 17.13 9.82, 16.63V15.62L15.4, 15.58L15.47, 15.47C16, 14.55 17.15, 14.23 18.05, 14.75C18.95, 15.27 19.26, 16.43 18.73, 17.35C18.2, 18.26 17.04, 18.58 16.14, 18.06C15.73, 17.83 15.44, 17.46 15.31, 17.04L11.24, 17.06C11.13, 17.73 10.87, 18.38 10.46, 19M17.74, 11.86C20.27, 12.17 22.07, 14.44 21.76, 16.93C21.45, 19.43 19.15, 21.2 16.62, 20.89C15.13, 20.71 13.9, 19.86 13.19, 18.68L14.43, 17.96C14.92, 18.73 15.75, 19.28 16.75, 19.41C18.5, 19.62 20.05, 18.43 20.26, 16.76C20.47, 15.09 19.23, 13.56 17.5, 13.35C16.96, 13.29 16.44, 13.36 15.97, 13.53L15.12, 13.97L12.54, 9.2H12.32C11.26, 9.16 10.44, 8.29 10.47, 7.25C10.5, 6.21 11.4, 5.4 12.45, 5.44C13.5, 5.5 14.33, 6.35 14.3, 7.39C14.28, 7.83 14.11, 8.23 13.84, 8.54L15.74, 12.05C16.36, 11.85 17.04, 11.78 17.74, 11.86M8.25, 9.14C7.25, 6.79 8.31, 4.1 10.62, 3.12C12.94, 2.14 15.62, 3.25 16.62, 5.6C17.21, 6.97 17.09, 8.47 16.42, 9.67L15.18, 8.95C15.6, 8.14 15.67, 7.15 15.27, 6.22C14.59, 4.62 12.78, 3.85 11.23, 4.5C9.67, 5.16 8.97, 7 9.65, 8.6C9.93, 9.26 10.4, 9.77 10.97, 10.11L11.36, 10.32L8.29, 15.31C8.32, 15.36 8.36, 15.42 8.39, 15.5C8.88, 16.41 8.54, 17.56 7.62, 18.05C6.71, 18.54 5.56, 18.18 5.06, 17.24C4.57, 16.31 4.91, 15.16 5.83, 14.67C6.22, 14.46 6.65, 14.41 7.06, 14.5L9.37, 10.73C8.9, 10.3 8.5, 9.76 8.25, 9.14Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="configurationpage?name=opensubtitles"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=opensubtitles"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M5, 4C4.45, 4 4, 4.18 3.59, 4.57C3.2, 4.96 3, 5.44 3, 6V18C3, 18.56 3.2, 19.04 3.59, 19.43C4, 19.82 4.45, 20 5, 20H19C19.5, 20 20, 19.81 20.39, 19.41C20.8, 19 21, 18.53 21, 18V6C21, 5.47 20.8, 5 20.39, 4.59C20, 4.19 19.5, 4 19, 4H5M4.5, 5.5H19.5V18.5H4.5V5.5M7, 9C6.7, 9 6.47, 9.09 6.28, 9.28C6.09, 9.47 6, 9.7 6, 10V14C6, 14.3 6.09, 14.53 6.28, 14.72C6.47, 14.91 6.7, 15 7, 15H10C10.27, 15 10.5, 14.91 10.71, 14.72C10.91, 14.53 11, 14.3 11, 14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11, 9.7 10.91, 9.47 10.71, 9.28C10.5, 9.09 10.27, 9 10, 9H7M14, 9C13.73, 9 13.5, 9.09 13.29, 9.28C13.09, 9.47 13, 9.7 13, 10V14C13, 14.3 13.09, 14.53 13.29, 14.72C13.5, 14.91 13.73, 15 14, 15H17C17.3, 15 17.53, 14.91 17.72, 14.72C17.91, 14.53 18, 14.3 18, 14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18, 9.7 17.91, 9.47 17.72, 9.28C17.53, 9.09 17.3, 9 17, 9H14Z'/></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="configurationpage?name=cinemamode"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=cinemamode"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M20.84 2.18L16.91 2.96L19.65 6.5L21.62 6.1L20.84 2.18M13.97 3.54L12 3.93L14.75 7.46L16.71 7.07L13.97 3.54M9.07 4.5L7.1 4.91L9.85 8.44L11.81 8.05L9.07 4.5M4.16 5.5L3.18 5.69A2 2 0 0 0 1.61 8.04L2 10L6.9 9.03L4.16 5.5M2 10V20C2 21.11 2.9 22 4 22H20C21.11 22 22 21.11 22 20V10H2Z'/></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="/logs"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/logs"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M8, 12H16V14H8V12M10, 20H6V4H13V9H18V12.1L20, 10.1V8L14, 2H6A2, 2 0 0, 0 4, 4V20A2, 2 0 0, 0 6, 22H10V20M8, 18H12.1L13, 17.1V16H8V18M20.2, 13C20.3, 13 20.5, 13.1 20.6, 13.2L21.9, 14.5C22.1, 14.7 22.1, 15.1 21.9, 15.3L20.9, 16.3L18.8, 14.2L19.8, 13.2C19.9, 13.1 20, 13 20.2, 13M20.2, 16.9L14.1, 23H12V20.9L18.1, 14.8L20.2, 16.9Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="/dashboard"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/dashboard"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M2, 5V19H8V5H2M9, 5V10H15V5H9M16, 5V14H22V5H16M9, 11V19H15V11H9M16, 15V19H22V15H16Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="/users"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/users"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="/metadatamanager"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/metadatamanager"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M12, 2A10, 10 0 0, 0 2, 12A10, 10 0 0, 0 12, 22A10, 10 0 0, 0 22, 12H20A8, 8 0 0, 1 12, 20A8, 8 0 0, 1 4, 12A8, 8 0 0, 1 12, 4V2M18.78, 3C18.61, 3 18.43, 3.07 18.3, 3.2L17.08, 4.41L19.58, 6.91L20.8, 5.7C21.06, 5.44 21.06, 5 20.8, 4.75L19.25, 3.2C19.12, 3.07 18.95, 3 18.78, 3M16.37, 5.12L9, 12.5V15H11.5L18.87, 7.62L16.37, 5.12Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="configurationpage?name=AutoOrganizeLog"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=AutoOrganizeLog"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="/devices"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/devices"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M3 6H21V4H3C1.9 4 1 4.9 1 6V18C1 19.1 1.9 20 3 20H7V18H3V6M13 12H9V13.78C8.39 14.33 8 15.11 8 16C8 16.89 8.39 17.67 9 18.22V20H13V18.22C13.61 17.67 14 16.88 14 16S13.61 14.33 13 13.78V12M11 17.5C10.17 17.5 9.5 16.83 9.5 16S10.17 14.5 11 14.5 12.5 15.17 12.5 16 11.83 17.5 11 17.5M22 8H16C15.5 8 15 8.5 15 9V19C15 19.5 15.5 20 16 20H22C22.5 20 23 19.5 23 19V9C23 8.5 22.5 8 22 8M21 18H17V10H21V18Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="/librarysetup/library.html"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/librarysetup/library.html"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M18, 6V17H22V6M2, 17H6V6H2M7, 19H17V4H7V19Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="/plugins"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/plugins"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M21.4 7.5C22.2 8.3 22.2 9.6 21.4 10.3L18.6 13.1L10.8 5.3L13.6 2.5C14.4 1.7 15.7 1.7 16.4 2.5L18.2 4.3L21.2 1.3L22.6 2.7L19.6 5.7L21.4 7.5M15.6 13.3L14.2 11.9L11.4 14.7L9.3 12.6L12.1 9.8L10.7 8.4L7.9 11.2L6.4 9.8L3.6 12.6C2.8 13.4 2.8 14.7 3.6 15.4L5.4 17.2L1.4 21.2L2.8 22.6L6.8 18.6L8.6 20.4C9.4 21.2 10.7 21.2 11.4 20.4L14.2 17.6L12.8 16.2L15.6 13.3Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="/transcoding"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/transcoding"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M3, 17V19H9V17H3M3, 5V7H13V5H3M13, 21V19H21V17H13V15H11V21H13M7, 9V11H3V13H7V15H9V9H7M21, 13V11H11V13H21M15, 9H17V7H21V5H17V3H15V9Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="/network"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/network"] i.md-icon.navMenuOptionIcon:before { content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path fill='white' d='M13, 19H14A1, 1 0 0, 1 15, 20H22V22H15A1, 1 0 0, 1 14, 23H10A1, 1 0 0, 1 9, 22H2V20H9A1, 1 0 0, 1 10, 19H11V17H4A1, 1 0 0, 1 3, 16V12A1, 1 0 0, 1 4, 11H20A1, 1 0 0, 1 21, 12V16A1, 1 0 0, 1 20, 17H13V19M4, 3H20A1, 1 0 0, 1 21, 4V8A1, 1 0 0, 1 20, 9H4A1, 1 0 0, 1 3, 8V4A1, 1 0 0, 1 4, 3M9, 7H10V5H9V7M9, 15H10V13H9V15M5, 5V7H7V5H5M5, 13V15H7V13H5Z' /></svg>"); visibility: visible; position: absolute; display: block; width: 21px; margin-left: -2px; top: 23%; } a[href="configurationpage?name=reports"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=reports"] i.md-icon.navMenuOptionIcon:before { content: 'bubble_chart'; visibility: visible; position: absolute; } a[href="configurationpage?name=activity_report"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=activity_report"] i.md-icon.navMenuOptionIcon:before { content: 'show_chart'; visibility: visible; position: absolute; } /*Custom Icons End*/ Looks like I have to learn how to target SVG elements inside a pseudo element. 1 Link to comment Share on other sites More sharing options...
kaj 241 Posted September 27, 2020 Share Posted September 27, 2020 31 minutes ago, chef said: I did however create a custom bunch of code for you that will enable the icons in white: Perfect!!! That does the trick, thank you Link to comment Share on other sites More sharing options...
chef 3745 Posted September 27, 2020 Author Share Posted September 27, 2020 This one is kind of fun, it changes the profile image to the Death Star. a[title="Profile"] i.md-icon.navMenuOptionIcon { content: '' ; visibility: hidden; } a[title="Profile"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2.05,13H21.94C21.88,13.69 21.74,14.36 21.54,15H14V17H17V19H15V21H12.5V22C12.33,22 12.17,22 12,22C6.82,22 2.55,18.05 2.05,13M21.94,11H2.05C2.55,5.95 6.82,2 12,2C13.62,2 15.15,2.39 16.5,3.08V5H18.5V7H20V9H21.54C21.74,9.64 21.88,10.31 21.94,11M12,6.75A2.5,2.5 0 0,0 9.5,4.25A2.5,2.5 0 0,0 7,6.75A2.5,2.5 0 0,0 9.5,9.25A2.5,2.5 0 0,0 12,6.75Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2.05,13H21.94C21.88,13.69 21.74,14.36 21.54,15H14V17H17V19H15V21H12.5V22C12.33,22 12.17,22 12,22C6.82,22 2.55,18.05 2.05,13M21.94,11H2.05C2.55,5.95 6.82,2 12,2C13.62,2 15.15,2.39 16.5,3.08V5H18.5V7H20V9H21.54C21.74,9.64 21.88,10.31 21.94,11M12,6.75A2.5,2.5 0 0,0 9.5,4.25A2.5,2.5 0 0,0 7,6.75A2.5,2.5 0 0,0 9.5,9.25A2.5,2.5 0 0,0 12,6.75Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } Link to comment Share on other sites More sharing options...
cochize1 40 Posted January 20, 2021 Share Posted January 20, 2021 On 9/27/2020 at 4:31 PM, chef said: This one is kind of fun, it changes the profile image to the Death Star. a[title="Profile"] i.md-icon.navMenuOptionIcon { content: '' ; visibility: hidden; } a[title="Profile"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2.05,13H21.94C21.88,13.69 21.74,14.36 21.54,15H14V17H17V19H15V21H12.5V22C12.33,22 12.17,22 12,22C6.82,22 2.55,18.05 2.05,13M21.94,11H2.05C2.55,5.95 6.82,2 12,2C13.62,2 15.15,2.39 16.5,3.08V5H18.5V7H20V9H21.54C21.74,9.64 21.88,10.31 21.94,11M12,6.75A2.5,2.5 0 0,0 9.5,4.25A2.5,2.5 0 0,0 7,6.75A2.5,2.5 0 0,0 9.5,9.25A2.5,2.5 0 0,0 12,6.75Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2.05,13H21.94C21.88,13.69 21.74,14.36 21.54,15H14V17H17V19H15V21H12.5V22C12.33,22 12.17,22 12,22C6.82,22 2.55,18.05 2.05,13M21.94,11H2.05C2.55,5.95 6.82,2 12,2C13.62,2 15.15,2.39 16.5,3.08V5H18.5V7H20V9H21.54C21.74,9.64 21.88,10.31 21.94,11M12,6.75A2.5,2.5 0 0,0 9.5,4.25A2.5,2.5 0 0,0 7,6.75A2.5,2.5 0 0,0 9.5,9.25A2.5,2.5 0 0,0 12,6.75Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } Hi @chef. It turns out that I need some minor help after all. I changed my Movies icon in main drawer by simply changing 'Profile' to 'Movies', that's the easy part. But how do I go about finding the icon I like (somewhere around here: http://www.w3.org/2000/svg ?) and then implementing that to your code so I can change other secions of mine, i.e. Documentaries, Cartoons etc. ? Link to comment Share on other sites More sharing options...
chef 3745 Posted January 20, 2021 Author Share Posted January 20, 2021 (edited) Sure thing, The best way to target the navbar icons is to target them with their 'href' in the Dashboard under: Settings > Custom Css. Below example is targeting the 'metadatamanager'. We are hiding the original icon, and then using the sudo element ':before' to inject the new svg icon. /*Custom Icons start*/ /*https://materialdesignicons.com/*/:root { --iconColor: rgba(0, 0, 0, 0.5) !important; --iconWidth: 22px; --iconHeight: 22px; --iconTop: 10px; } a[href="/metadatamanager"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/metadatamanager"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 2A10, 10 0 0, 0 2, 12A10, 10 0 0, 0 12, 22A10, 10 0 0, 0 22, 12H20A8, 8 0 0, 1 12, 20A8, 8 0 0, 1 4, 12A8, 8 0 0, 1 12, 4V2M18.78, 3C18.61, 3 18.43, 3.07 18.3, 3.2L17.08, 4.41L19.58, 6.91L20.8, 5.7C21.06, 5.44 21.06, 5 20.8, 4.75L19.25, 3.2C19.12, 3.07 18.95, 3 18.78, 3M16.37, 5.12L9, 12.5V15H11.5L18.87, 7.62L16.37, 5.12Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 2A10, 10 0 0, 0 2, 12A10, 10 0 0, 0 12, 22A10, 10 0 0, 0 22, 12H20A8, 8 0 0, 1 12, 20A8, 8 0 0, 1 4, 12A8, 8 0 0, 1 12, 4V2M18.78, 3C18.61, 3 18.43, 3.07 18.3, 3.2L17.08, 4.41L19.58, 6.91L20.8, 5.7C21.06, 5.44 21.06, 5 20.8, 4.75L19.25, 3.2C19.12, 3.07 18.95, 3 18.78, 3M16.37, 5.12L9, 12.5V15H11.5L18.87, 7.62L16.37, 5.12Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } You can reuse the same css code over and over for each icon, targeting a new href for each icon in the navbar, and then changing the svg 'd' attribute to draw the new icon. We also use a cool little trick with SVG Masks to inject the code. a[href="TARGETED_HREF_HERE"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="TARGETED_HREF_HERE"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='PLACE_YOUR_SVG_D_ATTRIBUTE_DATA_HERE' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='PLACE_YOUR_SVG_D_ATTRIBUTE_DATA_HERE' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } Here is my entire navbar custom css. I've made it fairly easy to edit colurs by using custom css variables at the top. Let me know how it goes. /*Custom Icons start*/ /*https://materialdesignicons.com/*/:root { --iconColor: rgba(0, 0, 0, 0.5) !important; --iconWidth: 22px; --iconHeight: 22px; --iconTop: 10px; } a[href="/notificationsettings.html"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/notificationsettings.html"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M22 12.41V4C22 2.9 21.11 2 20 2H4C2.9 2 2 2.89 2 4V22L6 18H9.29C10.15 20.89 12.83 23 16 23C19.86 23 23 19.87 23 16C23 14.69 22.63 13.46 22 12.41M5.17 16L4 17.17V4H20V10.26C18.86 9.47 17.5 9 16 9C14.1 9 12.37 9.77 11.11 11H6V13H9.69C9.25 13.91 9 14.93 9 16H5.17M16 20.85C13.32 20.85 11.15 18.68 11.15 16S13.32 11.15 16 11.15C18.67 11.15 20.85 13.32 20.85 16S18.67 20.85 16 20.85M18 9H6V7H18V9M16.5 15.82L18.94 17.23L18.19 18.53L15 16.69V13H16.5V15.82Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M22 12.41V4C22 2.9 21.11 2 20 2H4C2.9 2 2 2.89 2 4V22L6 18H9.29C10.15 20.89 12.83 23 16 23C19.86 23 23 19.87 23 16C23 14.69 22.63 13.46 22 12.41M5.17 16L4 17.17V4H20V10.26C18.86 9.47 17.5 9 16 9C14.1 9 12.37 9.77 11.11 11H6V13H9.69C9.25 13.91 9 14.93 9 16H5.17M16 20.85C13.32 20.85 11.15 18.68 11.15 16S13.32 11.15 16 11.15C18.67 11.15 20.85 13.32 20.85 16S18.67 20.85 16 20.85M18 9H6V7H18V9M16.5 15.82L18.94 17.23L18.19 18.53L15 16.69V13H16.5V15.82Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/embypremiere"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/embypremiere"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M20, 2H4V4L9.81, 8.36C6.14, 9.57 4.14, 13.53 5.35, 17.2C6.56, 20.87 10.5, 22.87 14.19, 21.66C17.86, 20.45 19.86, 16.5 18.65, 12.82C17.95, 10.71 16.3, 9.05 14.19, 8.36L20, 4V2M14.94, 19.5L12, 17.78L9.06, 19.5L9.84, 16.17L7.25, 13.93L10.66, 13.64L12, 10.5L13.34, 13.64L16.75, 13.93L14.16, 16.17L14.94, 19.5Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M20, 2H4V4L9.81, 8.36C6.14, 9.57 4.14, 13.53 5.35, 17.2C6.56, 20.87 10.5, 22.87 14.19, 21.66C17.86, 20.45 19.86, 16.5 18.65, 12.82C17.95, 10.71 16.3, 9.05 14.19, 8.36L20, 4V2M14.94, 19.5L12, 17.78L9.06, 19.5L9.84, 16.17L7.25, 13.93L10.66, 13.64L12, 10.5L13.34, 13.64L16.75, 13.93L14.16, 16.17L14.94, 19.5Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=DiskSpacePluginConfigurationPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=DiskSpacePluginConfigurationPage"] i.md-icon.navMenuOptionIcon:before { -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M6, 2H18A2, 2 0 0, 1 20, 4V20A2, 2 0 0, 1 18, 22H6A2, 2 0 0, 1 4, 20V4A2, 2 0 0, 1 6, 2M12, 4A6, 6 0 0, 0 6, 10C6, 13.31 8.69, 16 12.1, 16L11.22, 13.77C10.95, 13.29 11.11, 12.68 11.59, 12.4L12.45, 11.9C12.93, 11.63 13.54, 11.79 13.82, 12.27L15.74, 14.69C17.12, 13.59 18, 11.9 18, 10A6, 6 0 0, 0 12, 4M12, 9A1, 1 0 0, 1 13, 10A1, 1 0 0, 1 12, 11A1, 1 0 0, 1 11, 10A1, 1 0 0, 1 12, 9M7, 18A1, 1 0 0, 0 6, 19A1, 1 0 0, 0 7, 20A1, 1 0 0, 0 8, 19A1, 1 0 0, 0 7, 18M12.09, 13.27L14.58, 19.58L17.17, 18.08L12.95, 12.77L12.09, 13.27Z' /></svg>"); mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M6, 2H18A2, 2 0 0, 1 20, 4V20A2, 2 0 0, 1 18, 22H6A2, 2 0 0, 1 4, 20V4A2, 2 0 0, 1 6, 2M12, 4A6, 6 0 0, 0 6, 10C6, 13.31 8.69, 16 12.1, 16L11.22, 13.77C10.95, 13.29 11.11, 12.68 11.59, 12.4L12.45, 11.9C12.93, 11.63 13.54, 11.79 13.82, 12.27L15.74, 14.69C17.12, 13.59 18, 11.9 18, 10A6, 6 0 0, 0 12, 4M12, 9A1, 1 0 0, 1 13, 10A1, 1 0 0, 1 12, 11A1, 1 0 0, 1 11, 10A1, 1 0 0, 1 12, 9M7, 18A1, 1 0 0, 0 6, 19A1, 1 0 0, 0 7, 20A1, 1 0 0, 0 8, 19A1, 1 0 0, 0 7, 18M12.09, 13.27L14.58, 19.58L17.17, 18.08L12.95, 12.77L12.09, 13.27Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=FirewallBanPluginConfigurationPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=FirewallBanPluginConfigurationPage"] i.md-icon.navMenuOptionIcon:before { -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2,6V8H14V6H2M2,10V12H11V10H2M14.17,10.76L12.76,12.17L15.59,15L12.76,17.83L14.17,19.24L17,16.41L19.83,19.24L21.24,17.83L18.41,15L21.24,12.17L19.83,10.76L17,13.59L14.17,10.76M2,14V16H11V14H2Z' /></svg>"); mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2,6V8H14V6H2M2,10V12H11V10H2M14.17,10.76L12.76,12.17L15.59,15L12.76,17.83L14.17,19.24L17,16.41L19.83,19.24L21.24,17.83L18.41,15L21.24,12.17L19.83,10.76L17,13.59L14.17,10.76M2,14V16H11V14H2Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=MainPluginConfigurationPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=MainPluginConfigurationPage"] i.md-icon.navMenuOptionIcon:before { content: 'router'; visibility: visible; position: absolute; } a[href="/conversions?mode=convert"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/conversions?mode=convert"] i.md-icon.navMenuOptionIcon:before { -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2 12A10 10 0 1 0 12 2A10 10 0 0 0 2 12M15.6 13.72A4 4 0 0 0 16 12A4 4 0 0 0 12 8V10L8.88 7L12 4V6A6 6 0 0 1 18 12A5.9 5.9 0 0 1 17.07 15.19M6 12A5.9 5.9 0 0 1 6.93 8.81L8.4 10.28A4 4 0 0 0 8 12A4 4 0 0 0 12 16V14L15 17L12 20V18A6 6 0 0 1 6 12Z' /></svg>"); mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2 12A10 10 0 1 0 12 2A10 10 0 0 0 2 12M15.6 13.72A4 4 0 0 0 16 12A4 4 0 0 0 12 8V10L8.88 7L12 4V6A6 6 0 0 1 18 12A5.9 5.9 0 0 1 17.07 15.19M6 12A5.9 5.9 0 0 1 6.93 8.81L8.4 10.28A4 4 0 0 0 8 12A4 4 0 0 0 12 16V14L15 17L12 20V18A6 6 0 0 1 6 12Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=dlnasettings"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=dlnasettings"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M21.38, 12.56H12.85C11.97, 12.56 11.1, 12.96 10.61, 13.61V13.6C10.12, 14.28 9.32, 14.72 8.41, 14.72C6.92, 14.72 5.71, 13.5 5.71, 12C5.71, 10.5 6.92, 9.31 8.41, 9.31C9.32, 9.31 10.12, 9.75 10.61, 10.43V10.42C11.1, 11.07 11.97, 11.5 12.85, 11.5H21.29C21.45, 11.5 22, 11.4 22, 10.67C21.26, 6.43 17.1, 3.18 12.06, 3.18C8.96, 3.18 6.19, 4.41 4.34, 6.35C4.05, 6.79 4.35, 6.92 4.63, 6.96H10.14C11, 6.96 11.89, 6.54 12.38, 5.89V5.91C12.88, 5.23 13.67, 4.78 14.58, 4.78C16.07, 4.78 17.28, 6 17.28, 7.5C17.28, 9 16.07, 10.2 14.58, 10.2C13.67, 10.2 12.88, 9.75 12.38, 9.07V9.08C11.89, 8.44 11, 8.03 10.14, 8.03H4.13L4.15, 8.03C4.15, 8.03 3.26, 8 2.72, 8.75C2.3, 9.42 2, 10.85 2, 12C2, 13.16 2.17, 14.21 2.72, 15.27C3.19, 16.03 4.15, 16 4.15, 16H4.11L10.14, 16C11, 16 11.89, 15.58 12.38, 14.93V14.94C12.88, 14.26 13.67, 13.81 14.58, 13.81C16.07, 13.81 17.28, 15.03 17.28, 16.5C17.28, 18 16.07, 19.23 14.58, 19.23C13.67, 19.23 12.88, 18.78 12.38, 18.1V18.12C11.89, 17.47 11, 17.05 10.14, 17.05H4.64C4.36, 17.09 4.06, 17.22 4.32, 17.64C6.17, 19.58 8.95, 20.82 12.06, 20.82C17.11, 20.82 21.28, 17.57 22, 13.31C22, 12.72 21.59, 12.58 21.38, 12.56' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M21.38, 12.56H12.85C11.97, 12.56 11.1, 12.96 10.61, 13.61V13.6C10.12, 14.28 9.32, 14.72 8.41, 14.72C6.92, 14.72 5.71, 13.5 5.71, 12C5.71, 10.5 6.92, 9.31 8.41, 9.31C9.32, 9.31 10.12, 9.75 10.61, 10.43V10.42C11.1, 11.07 11.97, 11.5 12.85, 11.5H21.29C21.45, 11.5 22, 11.4 22, 10.67C21.26, 6.43 17.1, 3.18 12.06, 3.18C8.96, 3.18 6.19, 4.41 4.34, 6.35C4.05, 6.79 4.35, 6.92 4.63, 6.96H10.14C11, 6.96 11.89, 6.54 12.38, 5.89V5.91C12.88, 5.23 13.67, 4.78 14.58, 4.78C16.07, 4.78 17.28, 6 17.28, 7.5C17.28, 9 16.07, 10.2 14.58, 10.2C13.67, 10.2 12.88, 9.75 12.38, 9.07V9.08C11.89, 8.44 11, 8.03 10.14, 8.03H4.13L4.15, 8.03C4.15, 8.03 3.26, 8 2.72, 8.75C2.3, 9.42 2, 10.85 2, 12C2, 13.16 2.17, 14.21 2.72, 15.27C3.19, 16.03 4.15, 16 4.15, 16H4.11L10.14, 16C11, 16 11.89, 15.58 12.38, 14.93V14.94C12.88, 14.26 13.67, 13.81 14.58, 13.81C16.07, 13.81 17.28, 15.03 17.28, 16.5C17.28, 18 16.07, 19.23 14.58, 19.23C13.67, 19.23 12.88, 18.78 12.38, 18.1V18.12C11.89, 17.47 11, 17.05 10.14, 17.05H4.64C4.36, 17.09 4.06, 17.22 4.32, 17.64C6.17, 19.58 8.95, 20.82 12.06, 20.82C17.11, 20.82 21.28, 17.57 22, 13.31C22, 12.72 21.59, 12.58 21.38, 12.56' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=webhooks"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=webhooks"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M10.46, 19C9, 21.07 6.15, 21.59 4.09, 20.15C2.04, 18.71 1.56, 15.84 3, 13.75C3.87, 12.5 5.21, 11.83 6.58, 11.77L6.63, 13.2C5.72, 13.27 4.84, 13.74 4.27, 14.56C3.27, 16 3.58, 17.94 4.95, 18.91C6.33, 19.87 8.26, 19.5 9.26, 18.07C9.57, 17.62 9.75, 17.13 9.82, 16.63V15.62L15.4, 15.58L15.47, 15.47C16, 14.55 17.15, 14.23 18.05, 14.75C18.95, 15.27 19.26, 16.43 18.73, 17.35C18.2, 18.26 17.04, 18.58 16.14, 18.06C15.73, 17.83 15.44, 17.46 15.31, 17.04L11.24, 17.06C11.13, 17.73 10.87, 18.38 10.46, 19M17.74, 11.86C20.27, 12.17 22.07, 14.44 21.76, 16.93C21.45, 19.43 19.15, 21.2 16.62, 20.89C15.13, 20.71 13.9, 19.86 13.19, 18.68L14.43, 17.96C14.92, 18.73 15.75, 19.28 16.75, 19.41C18.5, 19.62 20.05, 18.43 20.26, 16.76C20.47, 15.09 19.23, 13.56 17.5, 13.35C16.96, 13.29 16.44, 13.36 15.97, 13.53L15.12, 13.97L12.54, 9.2H12.32C11.26, 9.16 10.44, 8.29 10.47, 7.25C10.5, 6.21 11.4, 5.4 12.45, 5.44C13.5, 5.5 14.33, 6.35 14.3, 7.39C14.28, 7.83 14.11, 8.23 13.84, 8.54L15.74, 12.05C16.36, 11.85 17.04, 11.78 17.74, 11.86M8.25, 9.14C7.25, 6.79 8.31, 4.1 10.62, 3.12C12.94, 2.14 15.62, 3.25 16.62, 5.6C17.21, 6.97 17.09, 8.47 16.42, 9.67L15.18, 8.95C15.6, 8.14 15.67, 7.15 15.27, 6.22C14.59, 4.62 12.78, 3.85 11.23, 4.5C9.67, 5.16 8.97, 7 9.65, 8.6C9.93, 9.26 10.4, 9.77 10.97, 10.11L11.36, 10.32L8.29, 15.31C8.32, 15.36 8.36, 15.42 8.39, 15.5C8.88, 16.41 8.54, 17.56 7.62, 18.05C6.71, 18.54 5.56, 18.18 5.06, 17.24C4.57, 16.31 4.91, 15.16 5.83, 14.67C6.22, 14.46 6.65, 14.41 7.06, 14.5L9.37, 10.73C8.9, 10.3 8.5, 9.76 8.25, 9.14Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M10.46, 19C9, 21.07 6.15, 21.59 4.09, 20.15C2.04, 18.71 1.56, 15.84 3, 13.75C3.87, 12.5 5.21, 11.83 6.58, 11.77L6.63, 13.2C5.72, 13.27 4.84, 13.74 4.27, 14.56C3.27, 16 3.58, 17.94 4.95, 18.91C6.33, 19.87 8.26, 19.5 9.26, 18.07C9.57, 17.62 9.75, 17.13 9.82, 16.63V15.62L15.4, 15.58L15.47, 15.47C16, 14.55 17.15, 14.23 18.05, 14.75C18.95, 15.27 19.26, 16.43 18.73, 17.35C18.2, 18.26 17.04, 18.58 16.14, 18.06C15.73, 17.83 15.44, 17.46 15.31, 17.04L11.24, 17.06C11.13, 17.73 10.87, 18.38 10.46, 19M17.74, 11.86C20.27, 12.17 22.07, 14.44 21.76, 16.93C21.45, 19.43 19.15, 21.2 16.62, 20.89C15.13, 20.71 13.9, 19.86 13.19, 18.68L14.43, 17.96C14.92, 18.73 15.75, 19.28 16.75, 19.41C18.5, 19.62 20.05, 18.43 20.26, 16.76C20.47, 15.09 19.23, 13.56 17.5, 13.35C16.96, 13.29 16.44, 13.36 15.97, 13.53L15.12, 13.97L12.54, 9.2H12.32C11.26, 9.16 10.44, 8.29 10.47, 7.25C10.5, 6.21 11.4, 5.4 12.45, 5.44C13.5, 5.5 14.33, 6.35 14.3, 7.39C14.28, 7.83 14.11, 8.23 13.84, 8.54L15.74, 12.05C16.36, 11.85 17.04, 11.78 17.74, 11.86M8.25, 9.14C7.25, 6.79 8.31, 4.1 10.62, 3.12C12.94, 2.14 15.62, 3.25 16.62, 5.6C17.21, 6.97 17.09, 8.47 16.42, 9.67L15.18, 8.95C15.6, 8.14 15.67, 7.15 15.27, 6.22C14.59, 4.62 12.78, 3.85 11.23, 4.5C9.67, 5.16 8.97, 7 9.65, 8.6C9.93, 9.26 10.4, 9.77 10.97, 10.11L11.36, 10.32L8.29, 15.31C8.32, 15.36 8.36, 15.42 8.39, 15.5C8.88, 16.41 8.54, 17.56 7.62, 18.05C6.71, 18.54 5.56, 18.18 5.06, 17.24C4.57, 16.31 4.91, 15.16 5.83, 14.67C6.22, 14.46 6.65, 14.41 7.06, 14.5L9.37, 10.73C8.9, 10.3 8.5, 9.76 8.25, 9.14Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=opensubtitles"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=opensubtitles"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M5, 4C4.45, 4 4, 4.18 3.59, 4.57C3.2, 4.96 3, 5.44 3, 6V18C3, 18.56 3.2, 19.04 3.59, 19.43C4, 19.82 4.45, 20 5, 20H19C19.5, 20 20, 19.81 20.39, 19.41C20.8, 19 21, 18.53 21, 18V6C21, 5.47 20.8, 5 20.39, 4.59C20, 4.19 19.5, 4 19, 4H5M4.5, 5.5H19.5V18.5H4.5V5.5M7, 9C6.7, 9 6.47, 9.09 6.28, 9.28C6.09, 9.47 6, 9.7 6, 10V14C6, 14.3 6.09, 14.53 6.28, 14.72C6.47, 14.91 6.7, 15 7, 15H10C10.27, 15 10.5, 14.91 10.71, 14.72C10.91, 14.53 11, 14.3 11, 14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11, 9.7 10.91, 9.47 10.71, 9.28C10.5, 9.09 10.27, 9 10, 9H7M14, 9C13.73, 9 13.5, 9.09 13.29, 9.28C13.09, 9.47 13, 9.7 13, 10V14C13, 14.3 13.09, 14.53 13.29, 14.72C13.5, 14.91 13.73, 15 14, 15H17C17.3, 15 17.53, 14.91 17.72, 14.72C17.91, 14.53 18, 14.3 18, 14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18, 9.7 17.91, 9.47 17.72, 9.28C17.53, 9.09 17.3, 9 17, 9H14Z'/></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M5, 4C4.45, 4 4, 4.18 3.59, 4.57C3.2, 4.96 3, 5.44 3, 6V18C3, 18.56 3.2, 19.04 3.59, 19.43C4, 19.82 4.45, 20 5, 20H19C19.5, 20 20, 19.81 20.39, 19.41C20.8, 19 21, 18.53 21, 18V6C21, 5.47 20.8, 5 20.39, 4.59C20, 4.19 19.5, 4 19, 4H5M4.5, 5.5H19.5V18.5H4.5V5.5M7, 9C6.7, 9 6.47, 9.09 6.28, 9.28C6.09, 9.47 6, 9.7 6, 10V14C6, 14.3 6.09, 14.53 6.28, 14.72C6.47, 14.91 6.7, 15 7, 15H10C10.27, 15 10.5, 14.91 10.71, 14.72C10.91, 14.53 11, 14.3 11, 14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11, 9.7 10.91, 9.47 10.71, 9.28C10.5, 9.09 10.27, 9 10, 9H7M14, 9C13.73, 9 13.5, 9.09 13.29, 9.28C13.09, 9.47 13, 9.7 13, 10V14C13, 14.3 13.09, 14.53 13.29, 14.72C13.5, 14.91 13.73, 15 14, 15H17C17.3, 15 17.53, 14.91 17.72, 14.72C17.91, 14.53 18, 14.3 18, 14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18, 9.7 17.91, 9.47 17.72, 9.28C17.53, 9.09 17.3, 9 17, 9H14Z'/></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=cinemamode"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=cinemamode"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M20.84 2.18L16.91 2.96L19.65 6.5L21.62 6.1L20.84 2.18M13.97 3.54L12 3.93L14.75 7.46L16.71 7.07L13.97 3.54M9.07 4.5L7.1 4.91L9.85 8.44L11.81 8.05L9.07 4.5M4.16 5.5L3.18 5.69A2 2 0 0 0 1.61 8.04L2 10L6.9 9.03L4.16 5.5M2 10V20C2 21.11 2.9 22 4 22H20C21.11 22 22 21.11 22 20V10H2Z'/></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M20.84 2.18L16.91 2.96L19.65 6.5L21.62 6.1L20.84 2.18M13.97 3.54L12 3.93L14.75 7.46L16.71 7.07L13.97 3.54M9.07 4.5L7.1 4.91L9.85 8.44L11.81 8.05L9.07 4.5M4.16 5.5L3.18 5.69A2 2 0 0 0 1.61 8.04L2 10L6.9 9.03L4.16 5.5M2 10V20C2 21.11 2.9 22 4 22H20C21.11 22 22 21.11 22 20V10H2Z'/></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/logs"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/logs"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M8, 12H16V14H8V12M10, 20H6V4H13V9H18V12.1L20, 10.1V8L14, 2H6A2, 2 0 0, 0 4, 4V20A2, 2 0 0, 0 6, 22H10V20M8, 18H12.1L13, 17.1V16H8V18M20.2, 13C20.3, 13 20.5, 13.1 20.6, 13.2L21.9, 14.5C22.1, 14.7 22.1, 15.1 21.9, 15.3L20.9, 16.3L18.8, 14.2L19.8, 13.2C19.9, 13.1 20, 13 20.2, 13M20.2, 16.9L14.1, 23H12V20.9L18.1, 14.8L20.2, 16.9Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M8, 12H16V14H8V12M10, 20H6V4H13V9H18V12.1L20, 10.1V8L14, 2H6A2, 2 0 0, 0 4, 4V20A2, 2 0 0, 0 6, 22H10V20M8, 18H12.1L13, 17.1V16H8V18M20.2, 13C20.3, 13 20.5, 13.1 20.6, 13.2L21.9, 14.5C22.1, 14.7 22.1, 15.1 21.9, 15.3L20.9, 16.3L18.8, 14.2L19.8, 13.2C19.9, 13.1 20, 13 20.2, 13M20.2, 16.9L14.1, 23H12V20.9L18.1, 14.8L20.2, 16.9Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/scheduledtasks"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/scheduledtasks"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M4 2V8H2V2H4M2 22V16H4V22H2M5 12C5 13.11 4.11 14 3 14C1.9 14 1 13.11 1 12C1 10.9 1.9 10 3 10C4.11 10 5 10.9 5 12M16 4C20.42 4 24 7.58 24 12C24 16.42 20.42 20 16 20C12.4 20 9.36 17.62 8.35 14.35L6 12L8.35 9.65C9.36 6.38 12.4 4 16 4M15 13L19.53 15.79L20.33 14.5L16.5 12.2V7H15V13Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M4 2V8H2V2H4M2 22V16H4V22H2M5 12C5 13.11 4.11 14 3 14C1.9 14 1 13.11 1 12C1 10.9 1.9 10 3 10C4.11 10 5 10.9 5 12M16 4C20.42 4 24 7.58 24 12C24 16.42 20.42 20 16 20C12.4 20 9.36 17.62 8.35 14.35L6 12L8.35 9.65C9.36 6.38 12.4 4 16 4M15 13L19.53 15.79L20.33 14.5L16.5 12.2V7H15V13Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/dashboard"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/dashboard"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2, 5V19H8V5H2M9, 5V10H15V5H9M16, 5V14H22V5H16M9, 11V19H15V11H9M16, 15V19H22V15H16Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2, 5V19H8V5H2M9, 5V10H15V5H9M16, 5V14H22V5H16M9, 11V19H15V11H9M16, 15V19H22V15H16Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/users"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/users"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M22, 3H2C0.91, 3.04 0.04, 3.91 0, 5V19C0.04, 20.09 0.91, 20.96 2, 21H22C23.09, 20.96 23.96, 20.09 24, 19V5C23.96, 3.91 23.09, 3.04 22, 3M22, 19H2V5H22V19M14, 17V15.75C14, 14.09 10.66, 13.25 9, 13.25C7.34, 13.25 4, 14.09 4, 15.75V17H14M9, 7A2.5, 2.5 0 0, 0 6.5, 9.5A2.5, 2.5 0 0, 0 9, 12A2.5, 2.5 0 0, 0 11.5, 9.5A2.5, 2.5 0 0, 0 9, 7M14, 7V8H20V7H14M14, 9V10H20V9H14M14, 11V12H18V11H14' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M22, 3H2C0.91, 3.04 0.04, 3.91 0, 5V19C0.04, 20.09 0.91, 20.96 2, 21H22C23.09, 20.96 23.96, 20.09 24, 19V5C23.96, 3.91 23.09, 3.04 22, 3M22, 19H2V5H22V19M14, 17V15.75C14, 14.09 10.66, 13.25 9, 13.25C7.34, 13.25 4, 14.09 4, 15.75V17H14M9, 7A2.5, 2.5 0 0, 0 6.5, 9.5A2.5, 2.5 0 0, 0 9, 12A2.5, 2.5 0 0, 0 11.5, 9.5A2.5, 2.5 0 0, 0 9, 7M14, 7V8H20V7H14M14, 9V10H20V9H14M14, 11V12H18V11H14' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/metadatamanager"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/metadatamanager"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 2A10, 10 0 0, 0 2, 12A10, 10 0 0, 0 12, 22A10, 10 0 0, 0 22, 12H20A8, 8 0 0, 1 12, 20A8, 8 0 0, 1 4, 12A8, 8 0 0, 1 12, 4V2M18.78, 3C18.61, 3 18.43, 3.07 18.3, 3.2L17.08, 4.41L19.58, 6.91L20.8, 5.7C21.06, 5.44 21.06, 5 20.8, 4.75L19.25, 3.2C19.12, 3.07 18.95, 3 18.78, 3M16.37, 5.12L9, 12.5V15H11.5L18.87, 7.62L16.37, 5.12Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 2A10, 10 0 0, 0 2, 12A10, 10 0 0, 0 12, 22A10, 10 0 0, 0 22, 12H20A8, 8 0 0, 1 12, 20A8, 8 0 0, 1 4, 12A8, 8 0 0, 1 12, 4V2M18.78, 3C18.61, 3 18.43, 3.07 18.3, 3.2L17.08, 4.41L19.58, 6.91L20.8, 5.7C21.06, 5.44 21.06, 5 20.8, 4.75L19.25, 3.2C19.12, 3.07 18.95, 3 18.78, 3M16.37, 5.12L9, 12.5V15H11.5L18.87, 7.62L16.37, 5.12Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=AutoOrganizeLog"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=AutoOrganizeLog"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=TorrentPluginConfigurationPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=TorrentPluginConfigurationPage"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 48 48'><path d=' M 19.44 0.00 L 28.55 0.00 C 33.03 1.60 37.42 3.79 40.84 7.16 C 44.21 10.57 46.39 14.97 48.00 19.44 L 48.00 28.55 C 46.40 33.03 44.21 37.42 40.84 40.84 C 37.42 44.21 33.03 46.39 28.56 48.00 L 19.45 48.00 C 14.97 46.39 10.57 44.21 7.15 40.84 C 3.78 37.43 1.61 33.03 0.00 28.56 L 0.00 19.45 C 1.60 14.97 3.78 10.57 7.16 7.16 C 10.58 3.79 14.96 1.61 19.44 0.00 M 2.69 23.01 C 2.14 32.19 8.56 41.23 17.26 44.01 C 15.08 34.46 9.81 25.88 7.93 16.25 C 10.02 15.13 12.40 15.06 14.71 15.11 C 16.23 17.76 17.36 20.60 18.36 23.48 C 19.40 26.24 20.63 29.43 23.62 30.58 C 27.22 32.51 32.44 30.18 32.96 26.03 C 31.83 21.28 28.76 17.19 28.07 12.30 C 29.87 11.90 31.68 11.55 33.50 11.26 C 36.04 15.61 37.32 20.60 40.11 24.81 C 41.16 26.52 43.08 27.23 45.01 27.25 C 47.32 15.27 36.98 3.15 25.00 2.69 C 13.74 1.97 3.14 11.81 2.69 23.01 M 30.04 34.98 C 27.68 35.82 25.12 35.50 22.66 35.51 C 23.66 38.96 24.95 42.35 26.99 45.33 C 34.58 43.87 40.99 38.42 44.05 31.39 C 41.29 31.21 38.55 30.82 35.86 30.17 C 33.95 31.80 32.28 33.78 30.04 34.98 Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 48 48'><path d=' M 19.44 0.00 L 28.55 0.00 C 33.03 1.60 37.42 3.79 40.84 7.16 C 44.21 10.57 46.39 14.97 48.00 19.44 L 48.00 28.55 C 46.40 33.03 44.21 37.42 40.84 40.84 C 37.42 44.21 33.03 46.39 28.56 48.00 L 19.45 48.00 C 14.97 46.39 10.57 44.21 7.15 40.84 C 3.78 37.43 1.61 33.03 0.00 28.56 L 0.00 19.45 C 1.60 14.97 3.78 10.57 7.16 7.16 C 10.58 3.79 14.96 1.61 19.44 0.00 M 2.69 23.01 C 2.14 32.19 8.56 41.23 17.26 44.01 C 15.08 34.46 9.81 25.88 7.93 16.25 C 10.02 15.13 12.40 15.06 14.71 15.11 C 16.23 17.76 17.36 20.60 18.36 23.48 C 19.40 26.24 20.63 29.43 23.62 30.58 C 27.22 32.51 32.44 30.18 32.96 26.03 C 31.83 21.28 28.76 17.19 28.07 12.30 C 29.87 11.90 31.68 11.55 33.50 11.26 C 36.04 15.61 37.32 20.60 40.11 24.81 C 41.16 26.52 43.08 27.23 45.01 27.25 C 47.32 15.27 36.98 3.15 25.00 2.69 C 13.74 1.97 3.14 11.81 2.69 23.01 M 30.04 34.98 C 27.68 35.82 25.12 35.50 22.66 35.51 C 23.66 38.96 24.95 42.35 26.99 45.33 C 34.58 43.87 40.99 38.42 44.05 31.39 C 41.29 31.21 38.55 30.82 35.86 30.17 C 33.95 31.80 32.28 33.78 30.04 34.98 Z'/></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=AlexaPluginConfigurationPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=AlexaPluginConfigurationPage"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 2A10, 10 0 0, 0 2, 12A10, 10 0 0, 0 12, 22A10, 10 0 0, 0 22, 12A10, 10 0 0, 0 12, 2M10.43, 21.87V19.91C10.43, 19.22 10, 18.57 9.35, 18.3C6.91, 17.26 5.17, 14.83 5.17, 12C5.17, 8.26 8.22, 5.17 12, 5.17C15.78, 5.17 18.83, 8.26 18.83, 12C18.83, 16.43 15.39, 20.61 10.43, 21.87Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 2A10, 10 0 0, 0 2, 12A10, 10 0 0, 0 12, 22A10, 10 0 0, 0 22, 12A10, 10 0 0, 0 12, 2M10.43, 21.87V19.91C10.43, 19.22 10, 18.57 9.35, 18.3C6.91, 17.26 5.17, 14.83 5.17, 12C5.17, 8.26 8.22, 5.17 12, 5.17C15.78, 5.17 18.83, 8.26 18.83, 12C18.83, 16.43 15.39, 20.61 10.43, 21.87Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/devices"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/devices"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M3 6H21V4H3C1.9 4 1 4.9 1 6V18C1 19.1 1.9 20 3 20H7V18H3V6M13 12H9V13.78C8.39 14.33 8 15.11 8 16C8 16.89 8.39 17.67 9 18.22V20H13V18.22C13.61 17.67 14 16.88 14 16S13.61 14.33 13 13.78V12M11 17.5C10.17 17.5 9.5 16.83 9.5 16S10.17 14.5 11 14.5 12.5 15.17 12.5 16 11.83 17.5 11 17.5M22 8H16C15.5 8 15 8.5 15 9V19C15 19.5 15.5 20 16 20H22C22.5 20 23 19.5 23 19V9C23 8.5 22.5 8 22 8M21 18H17V10H21V18Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M3 6H21V4H3C1.9 4 1 4.9 1 6V18C1 19.1 1.9 20 3 20H7V18H3V6M13 12H9V13.78C8.39 14.33 8 15.11 8 16C8 16.89 8.39 17.67 9 18.22V20H13V18.22C13.61 17.67 14 16.88 14 16S13.61 14.33 13 13.78V12M11 17.5C10.17 17.5 9.5 16.83 9.5 16S10.17 14.5 11 14.5 12.5 15.17 12.5 16 11.83 17.5 11 17.5M22 8H16C15.5 8 15 8.5 15 9V19C15 19.5 15.5 20 16 20H22C22.5 20 23 19.5 23 19V9C23 8.5 22.5 8 22 8M21 18H17V10H21V18Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/librarysetup/library.html"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/librarysetup/library.html"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M18, 6V17H22V6M2, 17H6V6H2M7, 19H17V4H7V19Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M18, 6V17H22V6M2, 17H6V6H2M7, 19H17V4H7V19Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/plugins"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/plugins"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M21.4 7.5C22.2 8.3 22.2 9.6 21.4 10.3L18.6 13.1L10.8 5.3L13.6 2.5C14.4 1.7 15.7 1.7 16.4 2.5L18.2 4.3L21.2 1.3L22.6 2.7L19.6 5.7L21.4 7.5M15.6 13.3L14.2 11.9L11.4 14.7L9.3 12.6L12.1 9.8L10.7 8.4L7.9 11.2L6.4 9.8L3.6 12.6C2.8 13.4 2.8 14.7 3.6 15.4L5.4 17.2L1.4 21.2L2.8 22.6L6.8 18.6L8.6 20.4C9.4 21.2 10.7 21.2 11.4 20.4L14.2 17.6L12.8 16.2L15.6 13.3Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M21.4 7.5C22.2 8.3 22.2 9.6 21.4 10.3L18.6 13.1L10.8 5.3L13.6 2.5C14.4 1.7 15.7 1.7 16.4 2.5L18.2 4.3L21.2 1.3L22.6 2.7L19.6 5.7L21.4 7.5M15.6 13.3L14.2 11.9L11.4 14.7L9.3 12.6L12.1 9.8L10.7 8.4L7.9 11.2L6.4 9.8L3.6 12.6C2.8 13.4 2.8 14.7 3.6 15.4L5.4 17.2L1.4 21.2L2.8 22.6L6.8 18.6L8.6 20.4C9.4 21.2 10.7 21.2 11.4 20.4L14.2 17.6L12.8 16.2L15.6 13.3Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/transcoding"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/transcoding"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M3, 17V19H9V17H3M3, 5V7H13V5H3M13, 21V19H21V17H13V15H11V21H13M7, 9V11H3V13H7V15H9V9H7M21, 13V11H11V13H21M15, 9H17V7H21V5H17V3H15V9Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M3, 17V19H9V17H3M3, 5V7H13V5H3M13, 21V19H21V17H13V15H11V21H13M7, 9V11H3V13H7V15H9V9H7M21, 13V11H11V13H21M15, 9H17V7H21V5H17V3H15V9Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/network"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/network"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M13, 19H14A1, 1 0 0, 1 15, 20H22V22H15A1, 1 0 0, 1 14, 23H10A1, 1 0 0, 1 9, 22H2V20H9A1, 1 0 0, 1 10, 19H11V17H4A1, 1 0 0, 1 3, 16V12A1, 1 0 0, 1 4, 11H20A1, 1 0 0, 1 21, 12V16A1, 1 0 0, 1 20, 17H13V19M4, 3H20A1, 1 0 0, 1 21, 4V8A1, 1 0 0, 1 20, 9H4A1, 1 0 0, 1 3, 8V4A1, 1 0 0, 1 4, 3M9, 7H10V5H9V7M9, 15H10V13H9V15M5, 5V7H7V5H5M5, 13V15H7V13H5Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M13, 19H14A1, 1 0 0, 1 15, 20H22V22H15A1, 1 0 0, 1 14, 23H10A1, 1 0 0, 1 9, 22H2V20H9A1, 1 0 0, 1 10, 19H11V17H4A1, 1 0 0, 1 3, 16V12A1, 1 0 0, 1 4, 11H20A1, 1 0 0, 1 21, 12V16A1, 1 0 0, 1 20, 17H13V19M4, 3H20A1, 1 0 0, 1 21, 4V8A1, 1 0 0, 1 20, 9H4A1, 1 0 0, 1 3, 8V4A1, 1 0 0, 1 4, 3M9, 7H10V5H9V7M9, 15H10V13H9V15M5, 5V7H7V5H5M5, 13V15H7V13H5Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/dashboardgeneral.html"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/dashboardgeneral.html"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M15.9, 18.45C17.25, 18.45 18.35, 17.35 18.35, 16C18.35, 14.65 17.25, 13.55 15.9, 13.55C14.54, 13.55 13.45, 14.65 13.45, 16C13.45, 17.35 14.54, 18.45 15.9, 18.45M21.1, 16.68L22.58, 17.84C22.71, 17.95 22.75, 18.13 22.66, 18.29L21.26, 20.71C21.17, 20.86 21, 20.92 20.83, 20.86L19.09, 20.16C18.73, 20.44 18.33, 20.67 17.91, 20.85L17.64, 22.7C17.62, 22.87 17.47, 23 17.3, 23H14.5C14.32, 23 14.18, 22.87 14.15, 22.7L13.89, 20.85C13.46, 20.67 13.07, 20.44 12.71, 20.16L10.96, 20.86C10.81, 20.92 10.62, 20.86 10.54, 20.71L9.14, 18.29C9.05, 18.13 9.09, 17.95 9.22, 17.84L10.7, 16.68L10.65, 16L10.7, 15.31L9.22, 14.16C9.09, 14.05 9.05, 13.86 9.14, 13.71L10.54, 11.29C10.62, 11.13 10.81, 11.07 10.96, 11.13L12.71, 11.84C13.07, 11.56 13.46, 11.32 13.89, 11.15L14.15, 9.29C14.18, 9.13 14.32, 9 14.5, 9H17.3C17.47, 9 17.62, 9.13 17.64, 9.29L17.91, 11.15C18.33, 11.32 18.73, 11.56 19.09, 11.84L20.83, 11.13C21, 11.07 21.17, 11.13 21.26, 11.29L22.66, 13.71C22.75, 13.86 22.71, 14.05 22.58, 14.16L21.1, 15.31L21.15, 16L21.1, 16.68M6.69, 8.07C7.56, 8.07 8.26, 7.37 8.26, 6.5C8.26, 5.63 7.56, 4.92 6.69, 4.92A1.58, 1.58 0 0, 0 5.11, 6.5C5.11, 7.37 5.82, 8.07 6.69, 8.07M10.03, 6.94L11, 7.68C11.07, 7.75 11.09, 7.87 11.03, 7.97L10.13, 9.53C10.08, 9.63 9.96, 9.67 9.86, 9.63L8.74, 9.18L8, 9.62L7.81, 10.81C7.79, 10.92 7.7, 11 7.59, 11H5.79C5.67, 11 5.58, 10.92 5.56, 10.81L5.4, 9.62L4.64, 9.18L3.5, 9.63C3.41, 9.67 3.3, 9.63 3.24, 9.53L2.34, 7.97C2.28, 7.87 2.31, 7.75 2.39, 7.68L3.34, 6.94L3.31, 6.5L3.34, 6.06L2.39, 5.32C2.31, 5.25 2.28, 5.13 2.34, 5.03L3.24, 3.47C3.3, 3.37 3.41, 3.33 3.5, 3.37L4.63, 3.82L5.4, 3.38L5.56, 2.19C5.58, 2.08 5.67, 2 5.79, 2H7.59C7.7, 2 7.79, 2.08 7.81, 2.19L8, 3.38L8.74, 3.82L9.86, 3.37C9.96, 3.33 10.08, 3.37 10.13, 3.47L11.03, 5.03C11.09, 5.13 11.07, 5.25 11, 5.32L10.03, 6.06L10.06, 6.5L10.03, 6.94Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M15.9, 18.45C17.25, 18.45 18.35, 17.35 18.35, 16C18.35, 14.65 17.25, 13.55 15.9, 13.55C14.54, 13.55 13.45, 14.65 13.45, 16C13.45, 17.35 14.54, 18.45 15.9, 18.45M21.1, 16.68L22.58, 17.84C22.71, 17.95 22.75, 18.13 22.66, 18.29L21.26, 20.71C21.17, 20.86 21, 20.92 20.83, 20.86L19.09, 20.16C18.73, 20.44 18.33, 20.67 17.91, 20.85L17.64, 22.7C17.62, 22.87 17.47, 23 17.3, 23H14.5C14.32, 23 14.18, 22.87 14.15, 22.7L13.89, 20.85C13.46, 20.67 13.07, 20.44 12.71, 20.16L10.96, 20.86C10.81, 20.92 10.62, 20.86 10.54, 20.71L9.14, 18.29C9.05, 18.13 9.09, 17.95 9.22, 17.84L10.7, 16.68L10.65, 16L10.7, 15.31L9.22, 14.16C9.09, 14.05 9.05, 13.86 9.14, 13.71L10.54, 11.29C10.62, 11.13 10.81, 11.07 10.96, 11.13L12.71, 11.84C13.07, 11.56 13.46, 11.32 13.89, 11.15L14.15, 9.29C14.18, 9.13 14.32, 9 14.5, 9H17.3C17.47, 9 17.62, 9.13 17.64, 9.29L17.91, 11.15C18.33, 11.32 18.73, 11.56 19.09, 11.84L20.83, 11.13C21, 11.07 21.17, 11.13 21.26, 11.29L22.66, 13.71C22.75, 13.86 22.71, 14.05 22.58, 14.16L21.1, 15.31L21.15, 16L21.1, 16.68M6.69, 8.07C7.56, 8.07 8.26, 7.37 8.26, 6.5C8.26, 5.63 7.56, 4.92 6.69, 4.92A1.58, 1.58 0 0, 0 5.11, 6.5C5.11, 7.37 5.82, 8.07 6.69, 8.07M10.03, 6.94L11, 7.68C11.07, 7.75 11.09, 7.87 11.03, 7.97L10.13, 9.53C10.08, 9.63 9.96, 9.67 9.86, 9.63L8.74, 9.18L8, 9.62L7.81, 10.81C7.79, 10.92 7.7, 11 7.59, 11H5.79C5.67, 11 5.58, 10.92 5.56, 10.81L5.4, 9.62L4.64, 9.18L3.5, 9.63C3.41, 9.67 3.3, 9.63 3.24, 9.53L2.34, 7.97C2.28, 7.87 2.31, 7.75 2.39, 7.68L3.34, 6.94L3.31, 6.5L3.34, 6.06L2.39, 5.32C2.31, 5.25 2.28, 5.13 2.34, 5.03L3.24, 3.47C3.3, 3.37 3.41, 3.33 3.5, 3.37L4.63, 3.82L5.4, 3.38L5.56, 2.19C5.58, 2.08 5.67, 2 5.79, 2H7.59C7.7, 2 7.79, 2.08 7.81, 2.19L8, 3.38L8.74, 3.82L9.86, 3.37C9.96, 3.33 10.08, 3.37 10.13, 3.47L11.03, 5.03C11.09, 5.13 11.07, 5.25 11, 5.32L10.03, 6.06L10.06, 6.5L10.03, 6.94Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/settings/keyboard.html"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/settings/keyboard.html"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M6, 16H18V18H6V16M6, 13V15H2V13H6M7, 15V13H10V15H7M11, 15V13H13V15H11M14, 15V13H17V15H14M18, 15V13H22V15H18M2, 10H5V12H2V10M19, 12V10H22V12H19M18, 12H16V10H18V12M8, 12H6V10H8V12M12, 12H9V10H12V12M15, 12H13V10H15V12M2, 9V7H4V9H2M5, 9V7H7V9H5M8, 9V7H10V9H8M11, 9V7H13V9H11M14, 9V7H16V9H14M17, 9V7H22V9H17Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M6, 16H18V18H6V16M6, 13V15H2V13H6M7, 15V13H10V15H7M11, 15V13H13V15H11M14, 15V13H17V15H14M18, 15V13H22V15H18M2, 10H5V12H2V10M19, 12V10H22V12H19M18, 12H16V10H18V12M8, 12H6V10H8V12M12, 12H9V10H12V12M15, 12H13V10H15V12M2, 9V7H4V9H2M5, 9V7H7V9H5M8, 9V7H10V9H8M11, 9V7H13V9H11M14, 9V7H16V9H14M17, 9V7H22V9H17Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="/home"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/home"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 3L20, 9V21H15V14H9V21H4V9L12, 3Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 3L20, 9V21H15V14H9V21H4V9L12, 3Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[href="configurationpage?name=reports"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=reports"] i.md-icon.navMenuOptionIcon:before { content: 'bubble_chart'; visibility: visible; position: absolute; } a[href="configurationpage?name=activity_report"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=activity_report"] i.md-icon.navMenuOptionIcon:before { content: 'show_chart'; visibility: visible; position: absolute; } a[href="configurationpage?name=MessageConfigPage"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="configurationpage?name=MessageConfigPage"] i.md-icon.navMenuOptionIcon:before { -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M20 16H6L4 18V4H20M17 11H15V9H17M13 11H11V9H13M9 11H7V9H9' /></svg>"); mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M20 16H6L4 18V4H20M17 11H15V9H17M13 11H11V9H13M9 11H7V9H9' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[title="Profile"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[title="Profile"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2.05, 13H21.94C21.88, 13.69 21.74, 14.36 21.54, 15H14V17H17V19H15V21H12.5V22C12.33, 22 12.17, 22 12, 22C6.82, 22 2.55, 18.05 2.05, 13M21.94, 11H2.05C2.55, 5.95 6.82, 2 12, 2C13.62, 2 15.15, 2.39 16.5, 3.08V5H18.5V7H20V9H21.54C21.74, 9.64 21.88, 10.31 21.94, 11M12, 6.75A2.5, 2.5 0 0, 0 9.5, 4.25A2.5, 2.5 0 0, 0 7, 6.75A2.5, 2.5 0 0, 0 9.5, 9.25A2.5, 2.5 0 0, 0 12, 6.75Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2.05, 13H21.94C21.88, 13.69 21.74, 14.36 21.54, 15H14V17H17V19H15V21H12.5V22C12.33, 22 12.17, 22 12, 22C6.82, 22 2.55, 18.05 2.05, 13M21.94, 11H2.05C2.55, 5.95 6.82, 2 12, 2C13.62, 2 15.15, 2.39 16.5, 3.08V5H18.5V7H20V9H21.54C21.74, 9.64 21.88, 10.31 21.94, 11M12, 6.75A2.5, 2.5 0 0, 0 9.5, 4.25A2.5, 2.5 0 0, 0 7, 6.75A2.5, 2.5 0 0, 0 9.5, 9.25A2.5, 2.5 0 0, 0 12, 6.75Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[title="Password"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[title="Password"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 1L3, 5V11C3, 16.55 6.84, 21.74 12, 23C17.16, 21.74 21, 16.55 21, 11V5L12, 1M12, 7C13.4, 7 14.8, 8.1 14.8, 9.5V11C15.4, 11 16, 11.6 16, 12.3V15.8C16, 16.4 15.4, 17 14.7, 17H9.2C8.6, 17 8, 16.4 8, 15.7V12.2C8, 11.6 8.6, 11 9.2, 11V9.5C9.2, 8.1 10.6, 7 12, 7M12, 8.2C11.2, 8.2 10.5, 8.7 10.5, 9.5V11H13.5V9.5C13.5, 8.7 12.8, 8.2 12, 8.2Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12, 1L3, 5V11C3, 16.55 6.84, 21.74 12, 23C17.16, 21.74 21, 16.55 21, 11V5L12, 1M12, 7C13.4, 7 14.8, 8.1 14.8, 9.5V11C15.4, 11 16, 11.6 16, 12.3V15.8C16, 16.4 15.4, 17 14.7, 17H9.2C8.6, 17 8, 16.4 8, 15.7V12.2C8, 11.6 8.6, 11 9.2, 11V9.5C9.2, 8.1 10.6, 7 12, 7M12, 8.2C11.2, 8.2 10.5, 8.7 10.5, 9.5V11H13.5V9.5C13.5, 8.7 12.8, 8.2 12, 8.2Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[title="Subtitles"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[title="Subtitles"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M5, 4C4.45, 4 4, 4.18 3.59, 4.57C3.2, 4.96 3, 5.44 3, 6V18C3, 18.56 3.2, 19.04 3.59, 19.43C4, 19.82 4.45, 20 5, 20H19C19.5, 20 20, 19.81 20.39, 19.41C20.8, 19 21, 18.53 21, 18V6C21, 5.47 20.8, 5 20.39, 4.59C20, 4.19 19.5, 4 19, 4H5M4.5, 5.5H19.5V18.5H4.5V5.5M7, 9C6.7, 9 6.47, 9.09 6.28, 9.28C6.09, 9.47 6, 9.7 6, 10V14C6, 14.3 6.09, 14.53 6.28, 14.72C6.47, 14.91 6.7, 15 7, 15H10C10.27, 15 10.5, 14.91 10.71, 14.72C10.91, 14.53 11, 14.3 11, 14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11, 9.7 10.91, 9.47 10.71, 9.28C10.5, 9.09 10.27, 9 10, 9H7M14, 9C13.73, 9 13.5, 9.09 13.29, 9.28C13.09, 9.47 13, 9.7 13, 10V14C13, 14.3 13.09, 14.53 13.29, 14.72C13.5, 14.91 13.73, 15 14, 15H17C17.3, 15 17.53, 14.91 17.72, 14.72C17.91, 14.53 18, 14.3 18, 14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18, 9.7 17.91, 9.47 17.72, 9.28C17.53, 9.09 17.3, 9 17, 9H14Z'/></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M5, 4C4.45, 4 4, 4.18 3.59, 4.57C3.2, 4.96 3, 5.44 3, 6V18C3, 18.56 3.2, 19.04 3.59, 19.43C4, 19.82 4.45, 20 5, 20H19C19.5, 20 20, 19.81 20.39, 19.41C20.8, 19 21, 18.53 21, 18V6C21, 5.47 20.8, 5 20.39, 4.59C20, 4.19 19.5, 4 19, 4H5M4.5, 5.5H19.5V18.5H4.5V5.5M7, 9C6.7, 9 6.47, 9.09 6.28, 9.28C6.09, 9.47 6, 9.7 6, 10V14C6, 14.3 6.09, 14.53 6.28, 14.72C6.47, 14.91 6.7, 15 7, 15H10C10.27, 15 10.5, 14.91 10.71, 14.72C10.91, 14.53 11, 14.3 11, 14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11, 9.7 10.91, 9.47 10.71, 9.28C10.5, 9.09 10.27, 9 10, 9H7M14, 9C13.73, 9 13.5, 9.09 13.29, 9.28C13.09, 9.47 13, 9.7 13, 10V14C13, 14.3 13.09, 14.53 13.29, 14.72C13.5, 14.91 13.73, 15 14, 15H17C17.3, 15 17.53, 14.91 17.72, 14.72C17.91, 14.53 18, 14.3 18, 14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18, 9.7 17.91, 9.47 17.72, 9.28C17.53, 9.09 17.3, 9 17, 9H14Z'/></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } .btnServerMoreMenu > i { content: ''; visibility: hidden; } .btnServerMoreMenu > i:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M16, 12A2, 2 0 0, 1 18, 10A2, 2 0 0, 1 20, 12A2, 2 0 0, 1 18, 14A2, 2 0 0, 1 16, 12M10, 12A2, 2 0 0, 1 12, 10A2, 2 0 0, 1 14, 12A2, 2 0 0, 1 12, 14A2, 2 0 0, 1 10, 12M4, 12A2, 2 0 0, 1 6, 10A2, 2 0 0, 1 8, 12A2, 2 0 0, 1 6, 14A2, 2 0 0, 1 4, 12Z'/></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M16, 12A2, 2 0 0, 1 18, 10A2, 2 0 0, 1 20, 12A2, 2 0 0, 1 18, 14A2, 2 0 0, 1 16, 12M10, 12A2, 2 0 0, 1 12, 10A2, 2 0 0, 1 14, 12A2, 2 0 0, 1 12, 14A2, 2 0 0, 1 10, 12M4, 12A2, 2 0 0, 1 6, 10A2, 2 0 0, 1 8, 12A2, 2 0 0, 1 6, 14A2, 2 0 0, 1 4, 12Z'/></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); } .navDrawerCollapseIcon { visibility: hidden; } .navDrawerCollapseIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M7.41, 8.58L12, 13.17L16.59, 8.58L18, 10L12, 16L6, 10L7.41, 8.58Z'/></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M7.41, 8.58L12, 13.17L16.59, 8.58L18, 10L12, 16L6, 10L7.41, 8.58Z'/></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); } /*Custom Icons End*/ Edited January 20, 2021 by chef Link to comment Share on other sites More sharing options...
cochize1 40 Posted January 20, 2021 Share Posted January 20, 2021 Thanks for the 'href' suggestion, I used 'title'. Since I am just a copy and paste hacker all I tried is using your code and replace with other svga ttribute from https://materialdesignicons.com although tried with some different websites. So far to na avail, example, I change your death start code: <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2.05,13H21.94C21.88,13.69 21.74,14.36 21.54,15H14V17H17V19H15V21H12.5V22C12.33,22 12.17,22 12,22C6.82,22 2.55,18.05 2.05,13M21.94,11H2.05C2.55,5.95 6.82,2 12,2C13.62,2 15.15,2.39 16.5,3.08V5H18.5V7H20V9H21.54C21.74,9.64 21.88,10.31 21.94,11M12,6.75A2.5,2.5 0 0,0 9.5,4.25A2.5,2.5 0 0,0 7,6.75A2.5,2.5 0 0,0 9.5,9.25A2.5,2.5 0 0,0 12,6.75Z' /></svg>"); to the 'atom' svg code <svg xmlns='http://www.w3.org/2000/svg' style="width:24px;height:24px" viewBox="0 0 24 24"><path d="M12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11M4.22,4.22C5.65,2.79 8.75,3.43 12,5.56C15.25,3.43 18.35,2.79 19.78,4.22C21.21,5.65 20.57,8.75 18.44,12C20.57,15.25 21.21,18.35 19.78,19.78C18.35,21.21 15.25,20.57 12,18.44C8.75,20.57 5.65,21.21 4.22,19.78C2.79,18.35 3.43,15.25 5.56,12C3.43,8.75 2.79,5.65 4.22,4.22M15.54,8.46C16.15,9.08 16.71,9.71 17.23,10.34C18.61,8.21 19.11,6.38 18.36,5.64C17.62,4.89 15.79,5.39 13.66,6.77C14.29,7.29 14.92,7.85 15.54,8.46M8.46,15.54C7.85,14.92 7.29,14.29 6.77,13.66C5.39,15.79 4.89,17.62 5.64,18.36C6.38,19.11 8.21,18.61 10.34,17.23C9.71,16.71 9.08,16.15 8.46,15.54M5.64,5.64C4.89,6.38 5.39,8.21 6.77,10.34C7.29,9.71 7.85,9.08 8.46,8.46C9.08,7.85 9.71,7.29 10.34,6.77C8.21,5.39 6.38,4.89 5.64,5.64M9.88,14.12C10.58,14.82 11.3,15.46 12,16.03C12.7,15.46 13.42,14.82 14.12,14.12C14.82,13.42 15.46,12.7 16.03,12C15.46,11.3 14.82,10.58 14.12,9.88C13.42,9.18 12.7,8.54 12,7.97C11.3,8.54 10.58,9.18 9.88,9.88C9.18,10.58 8.54,11.3 7.97,12C8.54,12.7 9.18,13.42 9.88,14.12M18.36,18.36C19.11,17.62 18.61,15.79 17.23,13.66C16.71,14.29 16.15,14.92 15.54,15.54C14.92,16.15 14.29,16.71 13.66,17.23C15.79,18.61 17.62,19.11 18.36,18.36Z" /></svg>"); and all I get is a square without any icon. Thought some other parts of my css can mess with that but also failed on css-less emby dashboard. Any ideas what I do wrong? Link to comment Share on other sites More sharing options...
chef 3745 Posted January 20, 2021 Author Share Posted January 20, 2021 (edited) 4 minutes ago, cochize1 said: Thanks for the 'href' suggestion, I used 'title'. Since I am just a copy and paste hacker all I tried is using your code and replace with other svga ttribute from https://materialdesignicons.com although tried with some different websites. So far to na avail, example, I change your death start code: <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2.05,13H21.94C21.88,13.69 21.74,14.36 21.54,15H14V17H17V19H15V21H12.5V22C12.33,22 12.17,22 12,22C6.82,22 2.55,18.05 2.05,13M21.94,11H2.05C2.55,5.95 6.82,2 12,2C13.62,2 15.15,2.39 16.5,3.08V5H18.5V7H20V9H21.54C21.74,9.64 21.88,10.31 21.94,11M12,6.75A2.5,2.5 0 0,0 9.5,4.25A2.5,2.5 0 0,0 7,6.75A2.5,2.5 0 0,0 9.5,9.25A2.5,2.5 0 0,0 12,6.75Z' /></svg>"); to the 'atom' svg code <svg xmlns='http://www.w3.org/2000/svg' style="width:24px;height:24px" viewBox="0 0 24 24"><path d="M12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11M4.22,4.22C5.65,2.79 8.75,3.43 12,5.56C15.25,3.43 18.35,2.79 19.78,4.22C21.21,5.65 20.57,8.75 18.44,12C20.57,15.25 21.21,18.35 19.78,19.78C18.35,21.21 15.25,20.57 12,18.44C8.75,20.57 5.65,21.21 4.22,19.78C2.79,18.35 3.43,15.25 5.56,12C3.43,8.75 2.79,5.65 4.22,4.22M15.54,8.46C16.15,9.08 16.71,9.71 17.23,10.34C18.61,8.21 19.11,6.38 18.36,5.64C17.62,4.89 15.79,5.39 13.66,6.77C14.29,7.29 14.92,7.85 15.54,8.46M8.46,15.54C7.85,14.92 7.29,14.29 6.77,13.66C5.39,15.79 4.89,17.62 5.64,18.36C6.38,19.11 8.21,18.61 10.34,17.23C9.71,16.71 9.08,16.15 8.46,15.54M5.64,5.64C4.89,6.38 5.39,8.21 6.77,10.34C7.29,9.71 7.85,9.08 8.46,8.46C9.08,7.85 9.71,7.29 10.34,6.77C8.21,5.39 6.38,4.89 5.64,5.64M9.88,14.12C10.58,14.82 11.3,15.46 12,16.03C12.7,15.46 13.42,14.82 14.12,14.12C14.82,13.42 15.46,12.7 16.03,12C15.46,11.3 14.82,10.58 14.12,9.88C13.42,9.18 12.7,8.54 12,7.97C11.3,8.54 10.58,9.18 9.88,9.88C9.18,10.58 8.54,11.3 7.97,12C8.54,12.7 9.18,13.42 9.88,14.12M18.36,18.36C19.11,17.62 18.61,15.79 17.23,13.66C16.71,14.29 16.15,14.92 15.54,15.54C14.92,16.15 14.29,16.71 13.66,17.23C15.79,18.61 17.62,19.11 18.36,18.36Z" /></svg>"); and all I get is a square without any icon. Thought some other parts of my css can mess with that but also failed on css-less emby dashboard. Any ideas what I do wrong? Can you post the entire css for that icon replacement? Edited January 20, 2021 by chef Link to comment Share on other sites More sharing options...
cochize1 40 Posted January 20, 2021 Share Posted January 20, 2021 There you go: /*Custom Icons start*/ /*https://materialdesignicons.com/*/:root { --iconColor: rgba(82, 181, 75, 1) !important; --iconWidth: 22px; --iconHeight: 22px; --iconTop: 10px; } a[title="Movies"] i.md-icon.navMenuOptionIcon { content: '' ; visibility: hidden; } a[title="Movies"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2.05,13H21.94C21.88,13.69 21.74,14.36 21.54,15H14V17H17V19H15V21H12.5V22C12.33,22 12.17,22 12,22C6.82,22 2.55,18.05 2.05,13M21.94,11H2.05C2.55,5.95 6.82,2 12,2C13.62,2 15.15,2.39 16.5,3.08V5H18.5V7H20V9H21.54C21.74,9.64 21.88,10.31 21.94,11M12,6.75A2.5,2.5 0 0,0 9.5,4.25A2.5,2.5 0 0,0 7,6.75A2.5,2.5 0 0,0 9.5,9.25A2.5,2.5 0 0,0 12,6.75Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M2.05,13H21.94C21.88,13.69 21.74,14.36 21.54,15H14V17H17V19H15V21H12.5V22C12.33,22 12.17,22 12,22C6.82,22 2.55,18.05 2.05,13M21.94,11H2.05C2.55,5.95 6.82,2 12,2C13.62,2 15.15,2.39 16.5,3.08V5H18.5V7H20V9H21.54C21.74,9.64 21.88,10.31 21.94,11M12,6.75A2.5,2.5 0 0,0 9.5,4.25A2.5,2.5 0 0,0 7,6.75A2.5,2.5 0 0,0 9.5,9.25A2.5,2.5 0 0,0 12,6.75Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } a[title="Documentary"] i.md-icon.navMenuOptionIcon { content: '' ; visibility: hidden; } a[title="Documentary"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style="width:24px;height:24px" viewBox="0 0 24 24"><path d="M12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11M4.22,4.22C5.65,2.79 8.75,3.43 12,5.56C15.25,3.43 18.35,2.79 19.78,4.22C21.21,5.65 20.57,8.75 18.44,12C20.57,15.25 21.21,18.35 19.78,19.78C18.35,21.21 15.25,20.57 12,18.44C8.75,20.57 5.65,21.21 4.22,19.78C2.79,18.35 3.43,15.25 5.56,12C3.43,8.75 2.79,5.65 4.22,4.22M15.54,8.46C16.15,9.08 16.71,9.71 17.23,10.34C18.61,8.21 19.11,6.38 18.36,5.64C17.62,4.89 15.79,5.39 13.66,6.77C14.29,7.29 14.92,7.85 15.54,8.46M8.46,15.54C7.85,14.92 7.29,14.29 6.77,13.66C5.39,15.79 4.89,17.62 5.64,18.36C6.38,19.11 8.21,18.61 10.34,17.23C9.71,16.71 9.08,16.15 8.46,15.54M5.64,5.64C4.89,6.38 5.39,8.21 6.77,10.34C7.29,9.71 7.85,9.08 8.46,8.46C9.08,7.85 9.71,7.29 10.34,6.77C8.21,5.39 6.38,4.89 5.64,5.64M9.88,14.12C10.58,14.82 11.3,15.46 12,16.03C12.7,15.46 13.42,14.82 14.12,14.12C14.82,13.42 15.46,12.7 16.03,12C15.46,11.3 14.82,10.58 14.12,9.88C13.42,9.18 12.7,8.54 12,7.97C11.3,8.54 10.58,9.18 9.88,9.88C9.18,10.58 8.54,11.3 7.97,12C8.54,12.7 9.18,13.42 9.88,14.12M18.36,18.36C19.11,17.62 18.61,15.79 17.23,13.66C16.71,14.29 16.15,14.92 15.54,15.54C14.92,16.15 14.29,16.71 13.66,17.23C15.79,18.61 17.62,19.11 18.36,18.36Z" /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style="width:24px;height:24px" viewBox="0 0 24 24"><path d="M12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11M4.22,4.22C5.65,2.79 8.75,3.43 12,5.56C15.25,3.43 18.35,2.79 19.78,4.22C21.21,5.65 20.57,8.75 18.44,12C20.57,15.25 21.21,18.35 19.78,19.78C18.35,21.21 15.25,20.57 12,18.44C8.75,20.57 5.65,21.21 4.22,19.78C2.79,18.35 3.43,15.25 5.56,12C3.43,8.75 2.79,5.65 4.22,4.22M15.54,8.46C16.15,9.08 16.71,9.71 17.23,10.34C18.61,8.21 19.11,6.38 18.36,5.64C17.62,4.89 15.79,5.39 13.66,6.77C14.29,7.29 14.92,7.85 15.54,8.46M8.46,15.54C7.85,14.92 7.29,14.29 6.77,13.66C5.39,15.79 4.89,17.62 5.64,18.36C6.38,19.11 8.21,18.61 10.34,17.23C9.71,16.71 9.08,16.15 8.46,15.54M5.64,5.64C4.89,6.38 5.39,8.21 6.77,10.34C7.29,9.71 7.85,9.08 8.46,8.46C9.08,7.85 9.71,7.29 10.34,6.77C8.21,5.39 6.38,4.89 5.64,5.64M9.88,14.12C10.58,14.82 11.3,15.46 12,16.03C12.7,15.46 13.42,14.82 14.12,14.12C14.82,13.42 15.46,12.7 16.03,12C15.46,11.3 14.82,10.58 14.12,9.88C13.42,9.18 12.7,8.54 12,7.97C11.3,8.54 10.58,9.18 9.88,9.88C9.18,10.58 8.54,11.3 7.97,12C8.54,12.7 9.18,13.42 9.88,14.12M18.36,18.36C19.11,17.62 18.61,15.79 17.23,13.66C16.71,14.29 16.15,14.92 15.54,15.54C14.92,16.15 14.29,16.71 13.66,17.23C15.79,18.61 17.62,19.11 18.36,18.36Z" /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } and this is what I get Link to comment Share on other sites More sharing options...
chef 3745 Posted January 20, 2021 Author Share Posted January 20, 2021 (edited) Ah... I figured out the problem. Try this code posted below for your Documentary icon, and if it works I can better explain what's going on: a[title="Documentary"] i.md-icon.navMenuOptionIcon { content: '' ; visibility: hidden; } a[title="Documentary"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11M4.22,4.22C5.65,2.79 8.75,3.43 12,5.56C15.25,3.43 18.35,2.79 19.78,4.22C21.21,5.65 20.57,8.75 18.44,12C20.57,15.25 21.21,18.35 19.78,19.78C18.35,21.21 15.25,20.57 12,18.44C8.75,20.57 5.65,21.21 4.22,19.78C2.79,18.35 3.43,15.25 5.56,12C3.43,8.75 2.79,5.65 4.22,4.22M15.54,8.46C16.15,9.08 16.71,9.71 17.23,10.34C18.61,8.21 19.11,6.38 18.36,5.64C17.62,4.89 15.79,5.39 13.66,6.77C14.29,7.29 14.92,7.85 15.54,8.46M8.46,15.54C7.85,14.92 7.29,14.29 6.77,13.66C5.39,15.79 4.89,17.62 5.64,18.36C6.38,19.11 8.21,18.61 10.34,17.23C9.71,16.71 9.08,16.15 8.46,15.54M5.64,5.64C4.89,6.38 5.39,8.21 6.77,10.34C7.29,9.71 7.85,9.08 8.46,8.46C9.08,7.85 9.71,7.29 10.34,6.77C8.21,5.39 6.38,4.89 5.64,5.64M9.88,14.12C10.58,14.82 11.3,15.46 12,16.03C12.7,15.46 13.42,14.82 14.12,14.12C14.82,13.42 15.46,12.7 16.03,12C15.46,11.3 14.82,10.58 14.12,9.88C13.42,9.18 12.7,8.54 12,7.97C11.3,8.54 10.58,9.18 9.88,9.88C9.18,10.58 8.54,11.3 7.97,12C8.54,12.7 9.18,13.42 9.88,14.12M18.36,18.36C19.11,17.62 18.61,15.79 17.23,13.66C16.71,14.29 16.15,14.92 15.54,15.54C14.92,16.15 14.29,16.71 13.66,17.23C15.79,18.61 17.62,19.11 18.36,18.36Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11M4.22,4.22C5.65,2.79 8.75,3.43 12,5.56C15.25,3.43 18.35,2.79 19.78,4.22C21.21,5.65 20.57,8.75 18.44,12C20.57,15.25 21.21,18.35 19.78,19.78C18.35,21.21 15.25,20.57 12,18.44C8.75,20.57 5.65,21.21 4.22,19.78C2.79,18.35 3.43,15.25 5.56,12C3.43,8.75 2.79,5.65 4.22,4.22M15.54,8.46C16.15,9.08 16.71,9.71 17.23,10.34C18.61,8.21 19.11,6.38 18.36,5.64C17.62,4.89 15.79,5.39 13.66,6.77C14.29,7.29 14.92,7.85 15.54,8.46M8.46,15.54C7.85,14.92 7.29,14.29 6.77,13.66C5.39,15.79 4.89,17.62 5.64,18.36C6.38,19.11 8.21,18.61 10.34,17.23C9.71,16.71 9.08,16.15 8.46,15.54M5.64,5.64C4.89,6.38 5.39,8.21 6.77,10.34C7.29,9.71 7.85,9.08 8.46,8.46C9.08,7.85 9.71,7.29 10.34,6.77C8.21,5.39 6.38,4.89 5.64,5.64M9.88,14.12C10.58,14.82 11.3,15.46 12,16.03C12.7,15.46 13.42,14.82 14.12,14.12C14.82,13.42 15.46,12.7 16.03,12C15.46,11.3 14.82,10.58 14.12,9.88C13.42,9.18 12.7,8.54 12,7.97C11.3,8.54 10.58,9.18 9.88,9.88C9.18,10.58 8.54,11.3 7.97,12C8.54,12.7 9.18,13.42 9.88,14.12M18.36,18.36C19.11,17.62 18.61,15.79 17.23,13.66C16.71,14.29 16.15,14.92 15.54,15.54C14.92,16.15 14.29,16.71 13.66,17.23C15.79,18.61 17.62,19.11 18.36,18.36Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-left: -2px; top: var(--iconTop); } Edited January 20, 2021 by chef Link to comment Share on other sites More sharing options...
cochize1 40 Posted January 20, 2021 Share Posted January 20, 2021 (edited) it worked:) so, what seems to be the problem sir? Edited January 20, 2021 by cochize1 Link to comment Share on other sites More sharing options...
chef 3745 Posted January 20, 2021 Author Share Posted January 20, 2021 When we read this line of code: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11M4.22,4.22C5.65,2.79 8.75,3.43 12,5.56C15.25,3.43 18.35,2.79 19.78,4.22C21.21,5.65 20.57,8.75 18.44,12C20.57,15.25 21.21,18.35 19.78,19.78C18.35,21.21 15.25,20.57 12,18.44C8.75,20.57 5.65,21.21 4.22,19.78C2.79,18.35 3.43,15.25 5.56,12C3.43,8.75 2.79,5.65 4.22,4.22M15.54,8.46C16.15,9.08 16.71,9.71 17.23,10.34C18.61,8.21 19.11,6.38 18.36,5.64C17.62,4.89 15.79,5.39 13.66,6.77C14.29,7.29 14.92,7.85 15.54,8.46M8.46,15.54C7.85,14.92 7.29,14.29 6.77,13.66C5.39,15.79 4.89,17.62 5.64,18.36C6.38,19.11 8.21,18.61 10.34,17.23C9.71,16.71 9.08,16.15 8.46,15.54M5.64,5.64C4.89,6.38 5.39,8.21 6.77,10.34C7.29,9.71 7.85,9.08 8.46,8.46C9.08,7.85 9.71,7.29 10.34,6.77C8.21,5.39 6.38,4.89 5.64,5.64M9.88,14.12C10.58,14.82 11.3,15.46 12,16.03C12.7,15.46 13.42,14.82 14.12,14.12C14.82,13.42 15.46,12.7 16.03,12C15.46,11.3 14.82,10.58 14.12,9.88C13.42,9.18 12.7,8.54 12,7.97C11.3,8.54 10.58,9.18 9.88,9.88C9.18,10.58 8.54,11.3 7.97,12C8.54,12.7 9.18,13.42 9.88,14.12M18.36,18.36C19.11,17.62 18.61,15.79 17.23,13.66C16.71,14.29 16.15,14.92 15.54,15.54C14.92,16.15 14.29,16.71 13.66,17.23C15.79,18.61 17.62,19.11 18.36,18.36Z' /></svg>"); We are wrapping the entire url in double quotes. That means that everything inside the double quotes must use single quotes. Note: to be a little more more confusing, we could have also escape the string literals with a backslash... In order to make this work, all our svg attributes must be wrapped in single quotes. Example: style='width:24px;height:24px' instead of: style="width:24px; height:24px" So, when you grab the svg icon data from materialicons.com it will arrive using double quotes. They will have to be changes to single. Did I explain that properly? Link to comment Share on other sites More sharing options...
cochize1 40 Posted January 20, 2021 Share Posted January 20, 2021 that easy?:) let me try that out Link to comment Share on other sites More sharing options...
cochize1 40 Posted January 20, 2021 Share Posted January 20, 2021 all is good now, I am just changing the svg part withing the d= attribute and it works smoothly. One more thing that cought my eye is that you hava sth called Massage Users. Is theis some sort of plugin or maybe custom API to prompt a massage to all your users? Link to comment Share on other sites More sharing options...
chef 3745 Posted January 20, 2021 Author Share Posted January 20, 2021 12 minutes ago, cochize1 said: all is good now, I am just changing the svg part withing the d= attribute and it works smoothly. One more thing that cought my eye is that you hava sth called Massage Users. Is theis some sort of plugin or maybe custom API to prompt a massage to all your users? Oh Yeah, I have a whole GitHub repo of plugins that aren't in the catalog. Search: chefbennyj1 on git to find it all For the message plugin I'll pm you the dll. 1 Link to comment Share on other sites More sharing options...
cochize1 40 Posted January 20, 2021 Share Posted January 20, 2021 great, thanks please tell what to do with it, do I just paste the dll in plugins root folder? Link to comment Share on other sites More sharing options...
cochize1 40 Posted January 20, 2021 Share Posted January 20, 2021 (edited) @chef what do I do wrong with the Display settings, this does not work for me: a[href="/settings/display.html"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/settings/display.html"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12 5.5L10 8H14L12 5.5M18 10V14L20.5 12L18 10M6 10L3.5 12L6 14V10M14 16H10L12 18.5L14 16M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3M21 19H3V5H21V19Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12 5.5L10 8H14L12 5.5M18 10V14L20.5 12L18 10M6 10L3.5 12L6 14V10M14 16H10L12 18.5L14 16M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3M21 19H3V5H21V19Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } there might be more but I stopped here Edited January 20, 2021 by cochize1 Link to comment Share on other sites More sharing options...
chef 3745 Posted January 20, 2021 Author Share Posted January 20, 2021 1 hour ago, cochize1 said: @chef what do I do wrong with the Display settings, this does not work for me: a[href="/settings/display.html"] i.md-icon.navMenuOptionIcon { content: ''; visibility: hidden; } a[href="/settings/display.html"] i.md-icon.navMenuOptionIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12 5.5L10 8H14L12 5.5M18 10V14L20.5 12L18 10M6 10L3.5 12L6 14V10M14 16H10L12 18.5L14 16M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3M21 19H3V5H21V19Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M12 5.5L10 8H14L12 5.5M18 10V14L20.5 12L18 10M6 10L3.5 12L6 14V10M14 16H10L12 18.5L14 16M21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3M21 19H3V5H21V19Z' /></svg>"); height: var(--iconHeight); content: ''; background-color: var(--iconColor); visibility: visible; position: absolute; display: block; width: var(--iconWidth); margin-left: -2px; top: var(--iconTop); } there might be more but I stopped here Ah, yes. Display (and some others in the navbar) use a custom URL which containers a user ID. In this case use the 'title' attribute to target the element. a[title="Display"] Link to comment Share on other sites More sharing options...
cochize1 40 Posted January 20, 2021 Share Posted January 20, 2021 ok, that worked:) but they seem a little off and not in the line with the text. Is the scaling different here? Link to comment Share on other sites More sharing options...
chef 3745 Posted January 21, 2021 Author Share Posted January 21, 2021 2 hours ago, cochize1 said: ok, that worked:) but they seem a little off and not in the line with the text. Is the scaling different here? Yes, this is because of how we scale the mask of the svg. I have code one moment Link to comment Share on other sites More sharing options...
cochize1 40 Posted January 21, 2021 Share Posted January 21, 2021 @chef and one more thing, I am trying to change the main icons, Hamburger, Home etc. is there a way to address the Back Arrow on main pages and while playing video? Using the code given above the new icon is a little misplaced to the left and top in video section (when the vide is playing) Link to comment Share on other sites More sharing options...
cochize1 40 Posted January 21, 2021 Share Posted January 21, 2021 wow, I figued sth like this and it seems to be working:) body > div.skinHeader.focuscontainer-x.headroom.adjustHeaderForEmbeddedScroll button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] i.md-icon.largeIcon { content: '' ; visibility: hidden; } div.skinHeader.focuscontainer-x.headroom.skinHeader-withBackground.adjustHeaderForEmbeddedScroll button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] i.md-icon.largeIcon { content: '' ; visibility: hidden; } div.skinHeader.focuscontainer-x.headroom.skinHeader-withBackground.adjustHeaderForEmbeddedScroll button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] i.md-icon.largeIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M15,18H13.5L7.5,12L13.5,6H15V18M10.33,12L13,14.67V9.33L10.33,12Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M15,18H13.5L7.5,12L13.5,6H15V18M10.33,12L13,14.67V9.33L10.33,12Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-top: -10px; top: var(--iconTop); } .videoOsdHeader button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] i.md-icon.largeIcon { content: '' ; visibility: hidden; } .videoOsdHeader button.headerBackButton.headerButton.hide-mouse-idle-tv[title="Back"] i.md-icon.largeIcon:before { mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M15,18H13.5L7.5,12L13.5,6H15V18M10.33,12L13,14.67V9.33L10.33,12Z' /></svg>"); -webkit-mask: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'><path d='M15,18H13.5L7.5,12L13.5,6H15V18M10.33,12L13,14.67V9.33L10.33,12Z' /></svg>"); height: var(--iconHeight); content:''; background-color:var(--iconColor); visibility: visible; position: absolute; display: block; width:var(--iconWidth); margin-top: -5px; margin-left: 5px; top: var(--iconTop); } 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now