Category Icons

[CristianAgata]

Hi at all,
is it possible change the icons in mosaic category?
Best regards Cristian

[admin]

Add this to Mosaic Custom CSS (top right menu > Settings & themes). Change test to your custom category name.

Code:

a[href="#s/test"] .icon-menu {
  background-image: url(/scada/resources/icons/alarm-active.svg);
}
a[href="#s/test"] .icon-menu::before {
  display: none !important;
}

[CristianAgata]

Add this to Mosaic Custom CSS (top right menu > Settings & themes). Change test to your custom category name.

Code:

a[href="#s/test"] .icon-menu {
  background-image: url(/scada/resources/icons/alarm-active.svg);
}
a[href="#s/test"] .icon-menu::before {
  display: none !important;
}

Hi admin,
I'm back on this post because I have a problem. With the widgets where I can set the category I've solved with your suggest. Now the problem it is with all that widgets where the customer can't choose the category (Scenes with add scene function).
Is there a way change icon and format from lowercase to uppercase?
Last thing, could be possible that this solution doesn't work in the cloud?
Best regards Cristian

[admin]

Use this:

Code:

a[href="#s/scene"] .icon-menu {
  background-image: url(/scada/resources/icons/alarm-active.svg);
}
a[href="#s/scene"] .icon-menu svg {
  visibility: hidden !important;
}
a[href="#s/scene"] {
  text-transform: uppercase;
}

[CristianAgata]

Use this:

Code:

a[href="#s/scene"] .icon-menu {
  background-image: url(/scada/resources/icons/alarm-active.svg);
}
a[href="#s/scene"] .icon-menu svg {
  visibility: hidden !important;
}
a[href="#s/scene"] {
  text-transform: uppercase;
}

thanks admin it works. 
Sorry but I have a new problem, locally it works fine but it doesn't works on cloud.
I've checked with F12 but I think that it is not possible solve this problem. Is It?
Best regards Cristian

[admin]

You can place image inside of CSS so it will work both locally and via cloud. Example:

Code:

a[href="#s/scene"] .icon-menu {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path d="m27.624 48.999c-.004 0-.008 0-.012 0-.227-.002-.916-.006-1.626-.006-1.421 0-2.476-1.185-2.507-2.813-.031-1.656 1.001-2.896 2.456-2.953v.002c.062-.004.125-.004.167-.002.128.004.478.019 1.412.018l.789-.003c.063-.001.108-.001.716-.001.021-.112.021-.266-.002-.371l-1.396.004c-.238-.002-.928-.004-1.638-.004-1.422 0-2.476-1.188-2.507-2.816-.031-1.654 1.002-2.896 2.457-2.949l4.126.006c.082-.267.191-.814.191-1.86.018-.368.182-3.046 1.293-4.528.199-.266.448-.533.729-.824.926-.97 2.074-2.178 2.074-5.4 0-3.664-2.553-6.222-6.206-6.222l-.71-.007c-3.406 0-5.782 2.47-5.782 6.007 0 3.13 1.082 4.299 1.951 5.239.265.285.502.547.691.81 1.03 1.416 1.2 3.862 1.223 4.341.037.744-.536 1.376-1.28 1.414-.747.027-1.378-.535-1.417-1.279-.044-.854-.294-2.313-.71-2.888-.132-.185-.303-.361-.489-.563-.999-1.078-2.669-2.885-2.669-7.072 0-4.964 3.645-8.708 8.479-8.708l.716-.002c5.164 0 8.909 3.752 8.909 8.922 0 4.307-1.766 6.158-2.819 7.266-.196.208-.381.395-.521.582-.438.59-.711 2.125-.754 2.977.001 1.938-.337 3.201-1.063 3.906-.289.279-.769.611-1.521.588l-4.175-.01c-.025.108-.025.259 0 .37.642 0 1.231.002 1.439.004l1.592-.004c1.504.057 2.537 1.297 2.506 2.953-.028 1.632-1.084 2.814-2.506 2.814-.781 0-.83.002-.896.002l-.816.002c-.708 0-1.104-.004-1.322-.01-.023.106-.023.254 0 .362.642 0 1.231.004 1.439.006.746.007 1.344.615 1.338 1.361-.006.742-.61 1.339-1.349 1.339zm16.251-23.306c-.001 0-.002 0-.003 0l-4.243-.01c-.746-.002-1.35-.607-1.347-1.353.001-.745.604-1.347 1.35-1.347h.003l4.243.01c.746.002 1.349.607 1.347 1.353 0 .744-.606 1.347-1.35 1.347zm-27.506 0c-.001 0-.002 0-.003 0l-4.244-.01c-.746-.002-1.349-.607-1.347-1.353.002-.745.606-1.347 1.35-1.347h.003l4.244.01c.746.002 1.349.607 1.347 1.353-.002.744-.606 1.347-1.35 1.347zm2.629-8.227c-.346 0-.693-.133-.957-.397l-2.996-3.008c-.526-.528-.524-1.383.004-1.909.528-.525 1.383-.524 1.909.004l2.996 3.008c.526.528.524 1.383-.004 1.909-.262.262-.607.393-.952.393zm17.998-.006c-.348 0-.691-.133-.956-.397-.526-.528-.524-1.383.003-1.909l3.008-2.996c.528-.526 1.383-.524 1.909.004s.524 1.383-.003 1.909l-3.008 2.996c-.263.262-.608.393-.953.393zm-9-3.515c-.001 0-.001 0-.002 0-.746-.001-1.349-.607-1.348-1.353l.008-4.244c.001-.744.605-1.348 1.35-1.348h.002c.746.001 1.35.607 1.348 1.353l-.008 4.244c0 .745-.605 1.348-1.35 1.348z" fill="red"></path></svg>')
}

Use these tools for conversion:
SVG: https://www.svgbackgrounds.com/tools/svg-to-css/
PNG/JPEG: https://www.base64-image.de/