aureliaslickgridaurelia-slickgrid

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


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

enter image description here

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?
     }

}

Solution

  • 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 and SVG Icons - Wiki, so you can also check them out.