Hello, there might be an easy way to do this, we’re experimenting with the concept. You could add the below code to your Customizer > Additional CSS, then modify the first line to have the color you want:
.em .em-icon { background : red; }
.em .em-icon.em-icon-logo-office365 { -webkit-mask-image: var(--icon-logo-office365); mask-image: var(--icon-logo-office365); }
.em .em-icon.em-icon-logo-google-calendar { -webkit-mask-image: var(--icon-logo-google-calendar); mask-image: var(--icon-logo-google-calendar); }
.em .em-icon.em-icon-logo-apple { -webkit-mask-image: var(--icon-logo-apple); mask-image: var(--icon-logo-apple); }
.em .em-icon.em-icon-logo-outlook { -webkit-mask-image: var(--icon-logo-outlook); mask-image: var(--icon-logo-outlook); }
.em .em-icon.em-icon-download { -webkit-mask-image: var(--icon-download); mask-image: var(--icon-download); }
.em .em-icon.em-icon-spinner { -webkit-mask-image: var(--icon-spinner); mask-image: var(--icon-spinner); }
.em .em-icon.em-icon-calendar { -webkit-mask-image: var(--icon-calendar); mask-image: var(--icon-calendar); }
.em .em-icon.em-icon-calendar-empty { -webkit-mask-image: var(--icon-calendar-empty); mask-image: var(--icon-calendar-empty); }
.em .em-icon.em-icon-list-grouped { -webkit-mask-image: var(--icon-list-grouped); mask-image: var(--icon-list-grouped); }
.em .em-icon.em-icon-filter { -webkit-mask-image: var(--icon-filter); mask-image: var(--icon-filter); }
.em .em-icon.em-icon-list { -webkit-mask-image: var(--icon-list); mask-image: var(--icon-list); }
.em .em-icon.em-icon-map { -webkit-mask-image: var(--icon-map); mask-image: var(--icon-map); }
.em .em-icon.em-icon-location { -webkit-mask-image: var(--icon-location); mask-image: var(--icon-location); }
.em .em-icon.em-icon-settings { -webkit-mask-image: var(--icon-settings); mask-image: var(--icon-settings); }
.em .em-icon.em-icon-clock { -webkit-mask-image: var(--icon-clock); mask-image: var(--icon-clock); }
.em .em-icon.em-icon-folder { -webkit-mask-image: var(--icon-folder); mask-image: var(--icon-folder); }
.em .em-icon.em-icon-category { -webkit-mask-image: var(--icon-folder); mask-image: var(--icon-folder); }
.em .em-icon.em-icon-tag { -webkit-mask-image: var(--icon-tag); mask-image: var(--icon-tag); }
.em .em-icon.em-icon-ticket { -webkit-mask-image: var(--icon-ticket); mask-image: var(--icon-ticket); }
.em .em-icon.em-icon-at { -webkit-mask-image: var(--icon-at); mask-image: var(--icon-at); }
.em .em-icon.em-icon-next-circle { -webkit-mask-image: var(--icon-next-circle); mask-image: var(--icon-next-circle); }
.em .em-icon.em-icon-prev-circle { -webkit-mask-image: var(--icon-prev-circle); mask-image: var(--icon-prev-circle); }
.em .em-icon.em-icon-first-circle { -webkit-mask-image: var(--icon-first-circle); mask-image: var(--icon-first-circle); }
.em .em-icon.em-icon-last-circle { -webkit-mask-image: var(--icon-last-circle); mask-image: var(--icon-last-circle); }
.em .em-icon.em-icon-cross-circle { -webkit-mask-image: var(--icon-cross-circle); mask-image: var(--icon-cross-circle); }
.em .em-icon.em-icon-checkmark-circle { -webkit-mask-image: var(--icon-checkmark-circle); mask-image: var(--icon-checkmark-circle); }
.em .em-icon.em-icon-close { -webkit-mask-image: var(--icon-close); mask-image: var(--icon-close); }
.em .em-icon.em-icon-chevron-down { -webkit-mask-image: var(--icon-chevron-down); mask-image: var(--icon-chevron-down); }
.em .em-icon.em-icon-chevron-up { -webkit-mask-image: var(--icon-chevron-up); mask-image: var(--icon-chevron-up); }
.em .em-icon.em-icon-magnifying-glass { -webkit-mask-image: var(--icon-magnifying-glass); mask-image: var(--icon-magnifying-glass); }
.em .em-icon.em-icon-location-on { -webkit-mask-image: var(--icon-location-on); mask-image: var(--icon-location-on); }
.em .em-icon.em-icon-location-off { -webkit-mask-image: var(--icon-location-off); mask-image: var(--icon-location-off); }
.em .em-icon.em-icon-checkmark { -webkit-mask-image: var(--icon-checkmark); mask-image: var(--icon-checkmark); }
.em .em-icon.em-icon-plus { -webkit-mask-image: var(--icon-plus); mask-image: var(--icon-plus); }
.em .em-icon.em-icon-minus { -webkit-mask-image: var(--icon-minus); mask-image: var(--icon-minus); }
.em .em-icon.em-icon-compass { -webkit-mask-image: var(--icon-compass); mask-image: var(--icon-compass); }
.em .em-icon.em-icon-options-v { -webkit-mask-image: var(--icon-options-v); mask-image: var(--icon-options-v); }
.em .em-icon.em-icon-point-down { -webkit-mask-image: var(--icon-point-down); mask-image: var(--icon-point-down); }
Just checked your site, looks like you did it another smart way, just copying the css and changing the svg fill color 🙂
Thank you for the CSS and for checking my site. I had a lot of work tweaking the colors one by one, but I think I’m getting in good shape now. I also pointed most of the plugin’s color variables to the ones from my theme so it is easier to change them in case I need to in the future. Also, kudos to the great plugin. You did an amazing job there!
I would like to know how to do this as well. The solution you provided does not work at all, and it is baffling to me that this is not a simple option somewhere in the settings. I even have the Pro version, which is NOT cheap. And still there is no way to choose colors for text, or icons, etc. WHY????
