Adjust snippets for your case and copy modified css snippet to:

Color Snippet

Color of criteria styling are the colors of global color scheme or overwriten by custom color scheme of space.

If you want to have more control over coloring criterias use following css snippet. 

.content-rating.content-rating-toggle ul li .content-rating-icon {
    color: #205081 !important;
    border: 4px solid #999999 !important;
}

.content-rating.content-rating-toggle ul li:hover .content-rating-icon {
    color: #205081 !important;
    border: 4px solid #205081 !important;
}

.content-rating.content-rating-toggle ul li .content-rating-icon.content-rating-active {
    color: #fff !important;
    background-color: #205081 !important;
    border: 4px solid #205081 !important;
}

.content-rating.content-rating-toggle ul li:hover .content-rating-icon.content-rating-active {
    color: #fff !important;
    border: 4px solid #999999 !important;
    background-color: #205081 !important;
}


Align Snippet

If you want to have more control over criterias position use following css snippet. 

.content-rating.content-rating-toggle {  
    text-align: left;  
}


Change icon

It is not possible to add other icons to the app, but you may upload your icon font somewhere else and then use CSS to replace the icons.

In the example the FontAwesome "thumbs-up" is replaced with a unicode shining star.

.content-rating-icon.fas.fa-thumbs-up:before {  
    font-family: "Arial" !important;  
    content: "\1F31F" !important;
} 
<style>
.content-rating-icon.fas.fa-thumbs-up:before {  
    font-family:  "Arial"  !important; 
    content: "\1F31F" !important;
} 
</style>