Styles for icon colour

You can define colour of svg icons in the webpart Menu by CSS styles uin files (if you intend use it on more pages or if they should be dependent on theme) or directly in webpart Menu (if you want to use the given style just in the particular webpart).

First we have to convert the required colour to a filter. We can use for that e.g. this website https://codepen.io/sosuke/pen/Pjoqqp.

E.g. following filter corresponds to colour #00a4d6:

filter: invert(66%) sepia(100%) saturate(3916%) hue-rotate(159deg) brightness(91%) contrast(101%);

We can set up the filter in three ways in the file with styles. We can use e.g. file ThemeStyle.css, that is applied if model or user have set the given theme. Three below stated options go from a general one to a more specific option. Option 3 (for CSS class) is prioritized over option 2 (for particular webpart ID).

/* 1. general style for all the webparts - is applied unless it is replaced with a more specific style */
div.cont div.mod_menu img.svg
{
filter: invert(58%) sepia(99%) saturate(4590%) hue-rotate(166deg) brightness(102%) contrast(101%);
}

/* 2. style for a particular webpart ID 701 */
wpid701 div.cont div.mod_menu img.svg
{
filter: invert(58%) sepia(54%) saturate(3994%) hue-rotate(1deg) brightness(102%) contrast(102%);
}

/* 3. style for CSS class x1 - will be applied to webparts that will have this class stated in the webpart style setting */
.x1 div.cont div.mod_menu img.svg
{
filter: invert(58%) sepia(99%) saturate(4590%) hue-rotate(166deg) brightness(102%) contrast(101%);
}

Style can be stated also directly in the webpart Menu and apply it just to certain icons. These styles will have priority over above stated styles.

Example: Webpart setting - in the CSS class there is stated x1, which is the class from the point 3 above. However, specific styles defined directly in the webpart are stated below in the field Menu definition.

Final colour that are displayed are these:

Below we will explain why we can see below icon colour like this:

cat= |text=

/* default colour of the webpart is colour from class x1 - it is applied to the first menu item */
page=knowledge_base.show_article|typeUrl=l|text=cs-CZ::Znalostní báze~en-US::KnowledgeBase|img=ImagesData/RemixIcon/System/shield-cross-fill.svg

/* after definition of the first menu item, there is a command setting up colour for items from here onward if these items do not define their own colour - this colour we can see with the second and fourth item in the menu */
svg-style=filter: invert(17%) sepia(94%) saturate(7059%) hue-rotate(2deg) brightness(99%) contrast(117%);
page=it.project_portfolio|typeUrl=l|text=cs-CZ::Service desk portál~en-US::Service desk portal|img=ImagesData/RemixIcon/System/shield-check-fill.svg

/* the third menu item contains in the setting command |svg-style=filter... - this item has therefore its own colour defined*/
page=it.page_2014_05|typeUrl=l|text=cs-CZ::Přehled manažera~en-US::Manager view|img=ImagesData/RemixIcon/System/shield-cross-line.svg|svg-style=filter: invert(8%) sepia(99%) saturate(7460%) hue-rotate(247deg) brightness(98%) contrast(144%);
page=it.form2|typeUrl=l|text=cs-CZ::Přiřazení obchodních zástupců~de-DE::Zurodnung von Geschäftsvertretern~en-US::Sales assignments|img=ImagesData/RemixIcon/System/settings-4-line.svg;