How to change aurelia slickgrid rowdetail "+" icon to another?

Question

I am using theaurelia-slickgrid library with the " RowDetailView " option, where we have the following icon:

Is it possible to override maybe the gridOptions somewhere, or anywhere else in order to use another icon? Currently I am using the rowdetail options like that:

    gridOptions = {
    ....
     rowDetailView: {
    ....
    //is there something that can change the default icon?
     }

}

Answer 1

You can change the icons by changing any of the icons associated SASS variables . You could also use CSS Variables, see at the bottom.

The defaults variables have the following Font-Awesome 4 icons (the hex value can be found from the Font-Awesome website), if you use a Font then you'll always have an associated Hex value:

$slick-detail-view-icon-collapse: "\f056";
$slick-detail-view-icon-expand:   "\f055";

When you use a Font then you'll always have an Hex value (as shown above), you could use any other Font (not just Font-Awesome) but if you do then don't forget to also change the associated SASS variable (below is for Font-Awesome 4)

$slick-icon-font-family: "FontAwesome";

You can also use SVGs, that is how I created the Salesforce & Material Themes (copy SVG path from Material Design Icons ), for example

$slick-detail-view-icon-collapse: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="darkgray" viewBox="0 0 24 24"><path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');
$slick-detail-view-icon-expand:   url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="darkgray" viewBox="0 0 24 24"><path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>');

You could also use CSS Variables which are also available via the same name by replacing the $ prefix with --

:root {
    --slick-detail-view-icon-collapse: "\f056";
    --slick-detail-view-icon-expand: "\f055";
}

and actually I wrote all of this answer, but in fact it's also explained very well in the multiple Wikis that I created on the same topic, Styling - Wiki andSVG Icons - Wiki , so you can also check them out.