I have a list of icons which look like this:  

[![enter image description here](https://i.stack.imgur.com/5FEBj.png)](https://i.stack.imgur.com/5FEBj.png)

In my view I retrieve the icon and name from my angular controller.
This is the how the html for this looks like currently:

```
<label-content label="File Format" required="true">
                <span class="col-xs-6">
                    <span ng-repeat="item in formats">
                            &nbsp;&nbsp;&nbsp;<i ng-click="setReportFormat(item.name)" class={{item.icon}}  aria-hidden="true"></i>
                    </span>
                </span>
                <span class="col-xs-10" style="padding-left:18.45em">
                    <span ng-repeat="item in formats">
                            &nbsp;&nbsp;{{item.name | uppercase}}
                    </span>
                </span>
</label-content>

```

What I want to accomplish is to have the icons show in a manner like this: [![enter image description here](https://i.stack.imgur.com/88PUW.png)](https://i.stack.imgur.com/88PUW.png)

Basically when the icon is selected the others should be grayed out and the one which is selected should be highlighted.

Still new to CSS and angular so any pointers on how I can achieve this ?