Skip to Main Content

User Interfaces Standing Committee

Working site for the UISC

Change the "Report a Problem" Icon

Change the "Report a Problem" Icon

Objective: Change the default "report a problem" icon.

How to accomplish this: This solution requires the following custom CSS code be added to the /VIEW_CODE/css/custom1.css file:



















/* hide the svg path from being shown */
md-icon[md-svg-icon="primo-ui:exclamation-mark"] svg path,
md-icon[md-svg-icon="primo-ui:close-report"] svg path{
  display: none !important;
}

/* set the background image properties of the on/off icons  */
md-icon[md-svg-icon="primo-ui:exclamation-mark"] svg,
md-icon[md-svg-icon="primo-ui:close-report"] svg {
  background-repeat: no-repeat;
  background-position: center center;
}

 /* set the image for the off icon */
md-icon[md-svg-icon="primo-ui:exclamation-mark"] svg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAD4ElEQVRoQ+1abW7TQBDdWRuBVFBtcoAmbVL1H+YEmBNQTkA5AeEElBMQTkC4QTgB4QSEf1WTNuEArVMEqEC6y44bR7bjj11nnURVLbWq2pn1vJnZmTeTArkhD9wQHOQWiLezu884d4ETR0TV4pw/wugCkO/i+wh/5oSMxC9G1OAdu9/vlRl9pYh4jmOxH7+bwFmTc7KpYhgCFF8t+3TQUtGTlZUG4m3X0fhDVQBxQwDgy8Nh35U1UFYuFwhGgV/86ojUeSJ7aK4cpW8rp8eHuXIKAplAvEbD4RMuQJAthTNzRUWKXTwcDqxcQQWBVCBTEN1FUynNFnoHHussAIlAvL29Kv8z6ZUFAsFRSl7rvPiJQM5rDQHiupyW9Yj0+iTSa1/X+XNAsDoxRt7pekHWOfSeWbOPjvyes+gTAXJdoX6OykypsMHUNJ/ag6OuKgi0E3XsXm8c6EaB7DQO2BX/oHpwUXlqwEv7pN9W1T+rNdrCcAc2N9wATATIea2OpfaZ6sGF5QE+Vob9AxV9L+zsUD+KAxkvK63QeOwnYIIrW4bDLUEwhG+CISDP858IkLNqXfC8FTwiMtQw2ln3ZXp/sSVsIYhwWq0PkMCrgoeBSZpJEQrSPgnE2gGZpdtd0wmX5aAlpIFYUyDRtMF7wf7xr1kg1g6IP7Ns3neCkhrcC2GolVcU4lULm6FWpqtSOuJEEu+F0HfzQMxFRHAswXY1zh0qKGI9BUdpzlhbBsR8am03WoTxVyrv1yWb1FOQhctysZVSlLAT8pojXnrCDYsx5oq1hjVbegB0cNqMAhEeYJeToS4vy56TBkJquJvSlDkav4p7ksaCMbXYXzblYrMoTP3DHZ9OpQGJkDJZly4il7GIKHxHAnuWGRVsdBxIlwJ0CdAxgasxUhR0KGe8VahqBUCCbrqIo4vqhvde6FBxsavhJpl2bvoWZclD1szAUD8JJlZcwcbZbhxQ5l4LJzHC+Yui3i2iRw363D45xo7uP159z2WTyWclrpX04rPt3UPC2JsiRhXRSdquBDZIs9+0Fy+7kiWVY6V5JMuDy4xMUlSiE+L8Tix3iT3L1etVkT9qFkkZFZ207UqkmsZIpjQQNGQpUaHwvnLab6ameXiBGJJVAuJThpK4GKYTGGZLZmGXNKcoAUEviUO0rYx84yl0yIONTnhrmJeG/qbx8tIKU/wCQPQMX0W3jMqdPU1BFw+rjAbKTsyKlPJht0Bi7rwxEdH52Qj6aGWpFSeHeZUq7+8rAxKMqHkGyv59ZUB0/+OAMhCfCXOoynoqTY4CHxX5tEpbH1kUQFn6yhEpy5BFz/0PTjlOUa/bgMUAAAAASUVORK5CYII=");
}

/* set the image for the on icon */
md-icon[md-svg-icon="primo-ui:close-report"] svg {
  background-image: url("data:image/png;base64,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");
}



















The background-image could be to an actual image URL loaded to your view/site, or like this example, the "image data" (can be easily copied from Firefox for any image) as the image.

Code credit: Primo listserv, required account