How to change the grouphub icon?

[Inactive User]

Looks like it's a hard coded SVG in the CSS. Other than overwriting that, is there a way to change it?

[elbranscomb · Accepted solution]

We did this too and you can change this by uploading a new svg of your choice into your Asset Library and then update the CSS on the group hub page in your Community skin with the new property. 

This icon appears several times, at least it does in our Community design. We updated the icon here from the 3 circles default to our 3 people icon:

1. Group Hub Card
   https://community.esri.com/t5/grouphubs/page
2. Group Information
   https://community.esri.com/t5/gis-jobs/gh-p/gis-jobs 
3. Autosuggest group icon
4. Search results group icon

We updated in CSS the following properties to reference the new asset. There may be other properties you wish to adjust such as color, size, position etc. but these are the CSS references that allowed us to make those changes to the default image:

_group page

.lia-group-hub-card {
.lia-node-avatar-grouphub, .lia-node-avatar-default{
&:before{
background: url("new asset url here");
}
}
}

.lia-node-info{
.lia-node-avatar-wrapper .lia-node-avatar-default{
&:before{
background: url("new asset url here");
}
}

_search

.board-icon{
.search-result-node-icon{
.lia-fa-grouphub{
&:before{
background: url("new asset url here");
}
}
}
}

.lia-autocomplete-content{
.search-result-autocomplete-node-icon{
.lia-fa-grouphub{
&:before{
background: url("new asset url here");
}
}
}
}

Hope this helps to find your right the element to update but let me know if you need any further info. 

[Inactive User]

Thanks! That was fantastically detailed and will no doubt save me some time! 

[elbranscomb]

No problem, hope it helps. I remember our teams were very puzzled over the three circles default icon so we were delighted to be able to change it. Good luck!