SVG Icons
Angular-Slickgrid was built with a Font set, mainly Font-Awesome 4, and if you use SASS it was easy enough to replace Font-Awesome to any other Font based set. The question is how do we use SVG instead of a Font? Most frameworks are switching to SVGs instead of Fonts (for smaller size and also efficiency). Angular-Slickgrid now has 2/3 Styling Themes that support SVGs which are Material Design & Salesforce Themes. These 2 new Themes use a subset of Material Design Icons SVGs (even a portion of the Salesforce theme). There are no Font-Awesome 5, I wouldn't mind adding a new Theme for that and if you wish to contribute then please open a new issue.
If you use SASS, you will find out that it's super easy to use either (Font) or (SVG), you simply have to replace the SASS necessary variables, more on that later.
The Material & Salesforce Themes are now using SVGs for the icons used by the grid. Each built-in Themes have CSS and SASS files associated with each theme. To take benefit of this, just import whichever CSS/SASS file associated with the Theme you wish to use.
/* style.css */
@import 'angular-slickgrid/styles/css/slickgrid-theme-bootstrap.css';
// or other Themes
// @import 'angular-slickgrid/styles/css/slickgrid-theme-material.css';
// @import 'angular-slickgrid/styles/css/slickgrid-theme-salesforce.css';/* change any SASS variables before loading the theme */
$primary-color: green;
/* style.scss */
@import 'angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';
// or other Themes
// @import 'angular-slickgrid/styles/sass/slickgrid-theme-material.scss';
// @import 'angular-slickgrid/styles/sass/slickgrid-theme-salesforce.scss';You could use Custom SVGs and create your own Theme and/or a different set of SVG Icons, each of the icons used in Angular-Slickgrid has an associated SASS variables which allow you to override any one of them. All grid of the icons are loaded with the content property of the :before pseudo (for example, see this line) and the difference between Font and SVG is simple, if you want to use a Font then you use the Font unicode but if you want an SVG then you use a url with svg+xml as shown below.
$primary-color: blue;
$icon-sort-color: $primary-color
$icon-sort-asc: "\f0d8";
$icon-sort-desc: "\f0d7";
$icon-sort-font-size: 13px;
$icon-sort-width: 13px;
// then on the last line, import the Theme that you wish to override
@import 'angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';// a simple utility that will encode a color with hash sign into a valid HTML URL (e.g. #red => %23red)
// you could also skip the use of this and simply manually change # symbol to %23
@import 'angular-slickgrid/styles/sass/sass-utilities';
$primary-color: blue;
$icon-sort-color: $primary-color
$icon-sort-asc: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-sort-color)}" viewBox="0 0 24 24"><path d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"></path></svg>');
$icon-sort-desc: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-sort-color)}" viewBox="0 0 24 24"><path d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z"></path></svg>');
$icon-sort-font-size: 13px;
$icon-sort-width: 13px;
// then on the last line, import the Theme that you wish to override
@import 'angular-slickgrid/styles/sass/slickgrid-theme-material.scss';So there's a known caveat with using embedded SVG (which is what this lib does), you can only add color once with the fill property and for that I added SASS variables for each icon (for example $icon-sort-color for the Sort icon color, or $icon-color for all icons) but once you do that it will apply that same color across the document (want it or not).
After lot of research, I found a way to hack it via this SO answer change any SVGs color via CSS filter, for example if we wish to apply a red color on the mdi-close icon (for the Draggable Grouping feat), we'll have to do this filter
.slick-groupby-remove.mdi-close {
/* close icon - red */
filter: invert(32%) sepia(96%) saturate(7466%) hue-rotate(356deg) brightness(97%) contrast(120%);
}You might be thinking, like I did, but how to get this long filter calculation???
For that you can visit the following blog post and use its color filter converter that was posted to answer this SO question
There is also a SASS Mixin to convert the color using only SASS as posted here in the same SO question. That will be part of the lib soon enough and we'll be able to use it this way (much cleaner):
.slick-groupby-remove.mdi-close {
/* close icon - red */
@include recolor(#ff0000, 0.8);
}Note that even though the code looks smaller and more human readable, in reality the code produced will still be a filter
@include recolor(#ff0000, 0.8); will in fact be converted to filter: invert(32%) sepia(96%) saturate(7466%) hue-rotate(356deg) brightness(97%) contrast(120%);
To help with all of this, we added a few colors (basically took the same colors used by Bootstrap here but we also added a light and dark of each colors, they both use a 6% lighter/darker shade (you can override the shade with $color-lighten-percentage and the same for darken), all the colors have a lither/darker shade except the color-light & color-dark which are useless to duplicate. These colors can be used with the color-X (for example color-primary), also note that the primary color will follow the $primary-color that you might have override (it could also be different in each styling theme, shown below is the salesforce theme colors). If you find that the colors are not exactly the colors you're looking, we've also took some colors of UiKit and tagged them as color-alt-X.
NOTE: You can use these colors on Text and/or Icon but remember that we are using CSS filter, that is not the same as using CSS color or background-color, so don't expect to see the color in your CSS but instead look at the filter.
// SASS colors
$color-primary: $primary-color;
$color-secondary: #6c757d;
$color-success: #28a745;
$color-danger: #dc3545;
$color-warning: #ffc107;
$color-info: #17a2b8;
$color-light: #f8f9fa;
$color-dark: #343a40;
$color-body: #212529;
$color-muted: #6c757d;
$color-white: #ffffff;
$color-alt-default: #1e87f0;
$color-alt-warning: #faa05a;
$color-alt-danger: #f0506e;
$color-alt-success: #32d296;
$color-lighten-percentage: 6%;
$color-darken-percentage: 6%;
<div>
<span class="color-primary">color-primary <i class="mdi mdi-help-circle"></i></span> -
<span class="color-primary-light">color-primary-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-primary-dark">color-primary-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-secondary">color-secondary <i class="mdi mdi-help-circle"></i></span> -
<span class="color-secondary-light">color-secondary-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-secondary-dark">color-secondary-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-success">color-success <i class="mdi mdi-help-circle"></i></span> -
<span class="color-success-light">color-success-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-success-dark">color-success-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-danger">color-danger <i class="mdi mdi-help-circle"></i></span> -
<span class="color-danger-light">color-danger-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-danger-dark">color-danger-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-warning">color-warning <i class="mdi mdi-help-circle"></i></span> -
<span class="color-warning-light">color-warning-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-warning-dark">color-warning-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-info">color-info <i class="mdi mdi-help-circle"></i></span> -
<span class="color-info-light">color-info-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-info-dark">color-info-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-body">color-body <i class="mdi mdi-help-circle"></i></span> -
<span class="color-body-light">color-body-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-body-dark">color-body-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-muted">color-muted <i class="mdi mdi-help-circle"></i></span> -
<span class="color-muted-light">color-muted-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-muted-dark">color-muted-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-dark">color-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div style="background-color: rgb(34, 34, 34)">
<span class="color-light">color-light <i class="mdi mdi-help-circle"></i></span>
</div>
<div style="background-color: rgb(34, 34, 34)">
<span class="color-white">color-white <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-alt-default">color-alt-default <i class="mdi mdi-help-circle"></i></span> -
<span class="color-alt-default-light">color-alt-default-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-alt-default-dark">color-alt-default-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-alt-warning">color-alt-warning <i class="mdi mdi-help-circle"></i></span> -
<span class="color-alt-warning-light">color-alt-warning-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-alt-warning-dark">color-alt-warning-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-alt-success">color-alt-success <i class="mdi mdi-help-circle"></i></span> -
<span class="color-alt-success-light">color-alt-success-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-alt-success-dark">color-alt-success-dark <i class="mdi mdi-help-circle"></i></span>
</div>
<div>
<span class="color-alt-danger">color-alt-danger <i class="mdi mdi-help-circle"></i></span> -
<span class="color-alt-danger-light">color-alt-danger-light <i class="mdi mdi-help-circle"></i></span> -
<span class="color-alt-danger-dark">color-alt-danger-dark <i class="mdi mdi-help-circle"></i></span>
</div>