Add an icons for commerce menu items

Was able to reuse the css variables for the icons and use a css filter to set their color to match the administration toolbar.

I added styles for the toolbar-tray. I did not add styles for the toolbar-bar since an admin cannot move menu items into that menu.

I was not able to use mask to set the color because that requires an actual dom element to function properly and modifying the structure of the toolbar isn't really a good idea if it's even possible.

I was not able to use mask to set the color because that requires an actual dom element to function properly and modifying the structure of the toolbar isn't really a good idea if it's even possible.

@rhovland I prefer we use a mask image. Can you explain how this is not functioning properly?

When I tried it it masked the entire menu item. Maybe I did it wrong? I'm not familiar with using mask to change svg color.

This should work:

.toolbar-tray .toolbar-icon.toolbar-icon-entity-commerce-order-collection::before {
    mask-image: var(--commerce-icon--clipboard-check-fill);
    background-color: #787878;
    mask-repeat: no-repeat;
    mask-position: center;
}

And then for active just change the background color.

It would be great if we had a class for all commerce toolbar items.
The existing icon should also be moved to a variable at some point.

The MR has been updated and needs thorough review. I've also updated the standard Commerce icon (drupal cart) to be used as a mask image.

Thank you for making these updates. I tested the 0eecdb17 version of the MR and it works!

Automatically closed - issue fixed for 2 weeks with no activity.