User Menu - Custom Icons

Site administration -> Appearance -> BAZ - Advanced -> Raw SCSS

Add/Change User Menu Item

1. Add "User Menu items" eg. (Site administration -> Appearance -> Theme settings -> User menu items)

LabelXYZ|https://apple.pl

Add Custom Icon

2. Add Custom CSS (BAZ -> Advanced -> Raw SCSS)

.usermenu .dropdown-item[data-identifier="LabelXYZ"] {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 6C6.5 6.27614 6.27614 6.5 6 6.5C5.72386 6.5 5.5 6.27614 5.5 6C5.5 5.72386 5.72386 5.5 6 5.5C6.27614 5.5 6.5 5.72386 6.5 6Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 12C6.5 12.2761 6.27614 12.5 6 12.5C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5C6.27614 11.5 6.5 11.7239 6.5 12Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 18C6.5 18.2761 6.27614 18.5 6 18.5C5.72386 18.5 5.5 18.2761 5.5 18C5.5 17.7239 5.72386 17.5 6 17.5C6.27614 17.5 6.5 17.7239 6.5 18Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 6H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 12H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 18H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
}

Important: data-identifier needs to be unique.

If Label is eg. Apple then the data-identifier is "Apple"

If contains more words (e.g "First letter of the sentence") then the proper code might look like this:

.usermenu .dropdown-item[data-identifier*="First"] {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 6C6.5 6.27614 6.27614 6.5 6 6.5C5.72386 6.5 5.5 6.27614 5.5 6C5.5 5.72386 5.72386 5.5 6 5.5C6.27614 5.5 6.5 5.72386 6.5 6Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 12C6.5 12.2761 6.27614 12.5 6 12.5C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5C6.27614 11.5 6.5 11.7239 6.5 12Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M6.5 18C6.5 18.2761 6.27614 18.5 6 18.5C5.72386 18.5 5.5 18.2761 5.5 18C5.5 17.7239 5.72386 17.5 6 17.5C6.27614 17.5 6.5 17.7239 6.5 18Z' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 6H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 12H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M9.75 18H18.25' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
}

How to convert SVG Icon?

https://yoksel.github.io/url-encoder/

1. Insert SVG code 2. Copy CSS code from "Ready for CSS"

SVG Icons Library

You can use icons from e.g:

• FontAwesome https://fontawesome.com/icons/stapler?s=solid&f=classic
• Iconic https://iconic.app/
• Iconoir https://iconoir.com/