Jump to content

Dashboard SVG replacement icons using custom CSS (simple)


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 1
Link to post
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 post
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 post
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 post
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 post
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 post
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...