icons in triggers and menus are aligned.

client/components/dropdown/dropdown.jsx

@@ -40,7 +40,8 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, i
 	const trigger = (groupName)=>{
 		if(!customTrigger){
 			return <>
-				<span className='menu-name'>{groupName}</span><i className={`caret fas fa-caret-${isSubMenu ? 'right' : 'down'}`}></i>
+				
+			<i className={icon}></i><span className='menu-name'>{groupName}</span><i className={`caret fas fa-caret-${isSubMenu ? 'right' : 'down'}`}></i>
 			</>;
 		} else {
 			return customTrigger;

client/homebrew/editor/snippetbar/snippetbar.less

@@ -156,28 +156,29 @@
 		position    : relative;
 		display     : flex;
 		justify-content: space-between;
-		align-items : center;
+		align-items : center; 
 		min-width   : max-content;
 		padding     : 5px;
 		cursor      : pointer;
 		width: 100%;
 		.animate(background-color);
+		.menu-name {
+			flex: 1;
+			text-align: left;
+			text-box-trim: trim-end;
+		}
 		i {
 			min-width    : 25px;
-			height       : 1.2em;
-			margin-right : 8px;
+			height       : .85rem;
 			font-size    : 1.2em;
 			text-align   : center;
+			&:first-child { margin-right: 5px }
 			&.caret {
 				margin-right: 0;
 			}
 			&.caret:is(.menu-wrapper .menu-wrapper * ) {
 				text-align: right;
 			}
-			& ~ i {
-				margin-right : 0;
-				margin-left  : 5px;
-			}
 			/* Fonts */
 			&.font {
 				height : auto;