By Nancy Babb, via the Primo mailing list

I’m pleased to report that modifying the CSS to hide the default QR Code icon and replace it with another icon is working very well for us.  Much thanks to Colin Meikle, Kevin Lin, Alice Tippit, and Jodi Pierre for so generously sharing code suggestions and good advice!  

We are on Primo VE and make the changes within the custom1.css file in each view.  I’ll share the code here in case it is helpful to other institutions, as well.  

We decided initially to completely hide the QR Code icon and replace it with a new icon in the primary menu and a different new individual record Send To menu, using the following code:  

md-icon svg[id^=’qrCode_’] {   
display:none;
}  

prm-search-bookmark-filter button#qrCodeScanner {    
background-image: url(https://search.lib.buffalo.edu/discovery/custom/01SUNY_BUF-everything/img/link.svg);    
background-size: 32px 25px;    
background-repeat: no-repeat;    
background-position: center;    
color:#005bbb
}  

prm-action-list li#QR prm-icon {    
background-image: url(https://search.lib.buffalo.edu/discovery/custom/01SUNY_BUF-everything/img/icon-qr.svg);    
background-size: 35px 20px;    
background-repeat: no-repeat;    
background-position: center;    
color:#005bbb
}  

This code hides the default QR Code icon and displays a chainlink icon in the primary menu and a qrcode icon in the Send To menu.
You can see this functionality in place in our default Primo VE Everything search at: search.lib.buffalo.edu/discovery/search?vid=01SUNY_BUF:everything  

We learned (thank you, Jodi!) that another alternative would be to hide the default QR Code icon only within the primary menu, and replace only that location with the chainlink icon, leaving the default icon in place in the Send To menu.  The example code for that is:  

#qrCodeScanner md-icon svg[id^=’qrCode_’] {   
display:none;
}  

prm-search-bookmark-filter button#qrCodeScanner {    
background-image: url(https://suny-buf-psb.primo.exlibrisgroup.com/discovery/custom/01SUNY_BUF-catalog/img/link.svg);
background-size: 32px 25px;    
background-repeat: no-repeat;    
background-position: center;    
color:#005bbb
}  

You can see this functionality in place in one of the views in our Sandbox: suny-buf-psb.primo.exlibrisgroup.com/discovery/search?vid=01SUNY_BUF:catalog

I hope these tips prove as helpful to others as they have been to us! I would think that it should be possible to use this type of code to change other icons elsewhere in Primo VE, too.  

I really greatly appreciate the support of the Primo-L community.  

Best,
–Nancy  

Nancy Babb, Discovery Services Librarian,
University Libraries University at Buffalo State University of New York