Jump to content

Dashboard SVG replacement icons using custom CSS (simple)


chef

Recommended Posts

These icons are scalable, and it switches up the dashboard a bit.

                   svgIcons.thumb.png.72d3910a14d05d31073799b977274021.png       svgIcons2.thumb.png.a43daf1a8e145f6b64915798f88f4b6e.png                                       

 

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 by chef
  • Like 2
Link to comment
Share on other sites

2 minutes ago, kaj said:

Wow, thanks..that's a lot of work......one small problem....I use a dark theme, and this happens:

custonicons.thumb.jpg.ca9d22cc20ca83f7728e7fe01bb3edb0.jpg

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 by chef
Link to comment
Share on other sites

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

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. 

  • Thanks 1
Link to comment
Share on other sites

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

This one is kind of fun, it changes the profile image to the Death Star.

 

profileDeathStar.png.a321a443327b6f7301a2643178d4853e.png

 

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

  • 3 months later...
cochize1
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.

 

profileDeathStar.png.a321a443327b6f7301a2643178d4853e.png

 


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

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 by chef
Link to comment
Share on other sites

cochize1

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

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 by chef
Link to comment
Share on other sites

cochize1

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

image.png.645e301e509c34e76a574380f0c1497e.png

Link to comment
Share on other sites

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 by chef
Link to comment
Share on other sites

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

cochize1

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?

image.png.2fb312dcec5b7558027047df93c21580.png

Link to comment
Share on other sites

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?

image.png.2fb312dcec5b7558027047df93c21580.png

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. 👍

  • Thanks 1
Link to comment
Share on other sites

cochize1

@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 by cochize1
Link to comment
Share on other sites

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

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

cochize1

@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

cochize1

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);
    }

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...