document about custom icons

README.md

@@ -332,6 +332,12 @@ entities:
   - media_player.sonos_livingroom
 ```
 
+## Device icons
+
+You can configure icons for your devices. This is done under Home Assistant -> Settings -> Entities, select your device then configure the Icon property. If you have configured an icon, it will show in the groups section of the card.
+It is recommended to install this one in HACS GitHub - elax46/custom-brand-icons. It has a lot of icons for different devices.
+
+![device_icons.png](https://github.com/punxaphil/custom-sonos-card/raw/main/img/device_icons.png)
 
 ## CSS Styling
 
@@ -359,7 +365,7 @@ The above YAML renders the following:
 
 ### More card_mod examples
 
-### Example 1 - Reduce margin for grouping list items
+#### Example 1 - Reduce margin for grouping list items
 
 ![card_mod_grouping_margin.png](https://github.com/punxaphil/custom-sonos-card/raw/main/img/card_mod_grouping_margin.png)
 
@@ -375,7 +381,7 @@ card_mod:
       }
 ```
 
-### Example 2 - Resize volume and icons
+#### Example 2 - Resize volume and icons
 
 ```yaml
 card_mod:
@@ -392,7 +398,7 @@ card_mod:
 
 ```
 
-### Example 3 - Change the font and background color of grouping button
+#### Example 3 - Change the font and background color of grouping button
 
 ```yaml
 card_mod:
@@ -404,7 +410,7 @@ card_mod:
       }
 ```
 
-### Example 4 - Resize controls area in player section
+#### Example 4 - Resize controls area in player section
 
 ```yaml
 card_mod:
@@ -415,7 +421,7 @@ card_mod:
       }
 ```
 
-### Example 5 - Hide entity/group name
+#### Example 5 - Hide entity/group name
 
 ```yaml
 card_mod:
@@ -426,7 +432,7 @@ card_mod:
       }
 ```
 
-### Example 6 - More transparent title track and volume slider
+#### Example 6 - More transparent title track and volume slider
 
 ```yaml
 card_mod:
@@ -441,7 +447,7 @@ card_mod:
       }
 ```
 
-### Example 7 - Make the padding smaller around the artwork of the thumbnails in the favorites section
+#### Example 7 - Make the padding smaller around the artwork of the thumbnails in the favorites section
 
 ```yaml
 card_mod:
@@ -452,7 +458,7 @@ card_mod:
       }  
 ```
 
-### Example 8 - Remove artwork in player section
+#### Example 8 - Remove artwork in player section
 
 ```yaml
 card_mod:
@@ -463,7 +469,7 @@ card_mod:
       }
 ```
 
-### Example 9 - Hide volume slider and mute icon
+#### Example 9 - Hide volume slider and mute icon
 
 ```yaml
 card_mod:
@@ -474,7 +480,7 @@ card_mod:
       }
 ```
 
-### Example 10 - Hide background from controls when artwork is shown as background
+#### Example 10 - Hide background from controls when artwork is shown as background
 
 ```yaml
 artworkAsBackground: true
@@ -485,7 +491,7 @@ card_mod:
     }
 ```
 
-### Example 11 - Modify transparency of background from controls when artwork is shown as background
+#### Example 11 - Modify transparency of background from controls when artwork is shown as background
 
 ```yaml
 artworkAsBackground: true
@@ -497,7 +503,7 @@ card_mod:
       }
 ```
 
-### Example 12 - Show only player and now playing text information
+#### Example 12 - Show only player and now playing text information
 
 ```yaml
 heightPercentage: auto
@@ -514,7 +520,7 @@ card_mod:
       }
 ```
 
-### Example 13 - Style the favorite section
+#### Example 13 - Style the favorite section
 
 ```yaml
 card_mod:
@@ -526,7 +532,7 @@ card_mod:
       }  
 ```
 
-### Example 14 - Color of the player controls
+#### Example 14 - Color of the player controls
 
 ```yaml
 card_mod:
@@ -537,7 +543,7 @@ card_mod:
       }
 ```
 
-### Example 15 - Remove the top "All favorites" and "Browse media" from the favorites section
+#### Example 15 - Remove the top "All favorites" and "Browse media" from the favorites section
 
 ```yaml
 card_mod:
@@ -548,7 +554,7 @@ card_mod:
       }
 ```
 
-### Example 16 - Change colors of titles in favorites
+#### Example 16 - Change colors of titles in favorites
 
 ```yaml
 card_mod:
@@ -560,7 +566,7 @@ card_mod:
       }  
 ```
 
-### Example 17 - Remove everything except the album art
+#### Example 17 - Remove everything except the album art
 
 ```yaml
 card_mod:
@@ -571,7 +577,7 @@ card_mod:
       }
 ```
 
-### Example 18 - Hide the volume button and percentage
+#### Example 18 - Hide the volume button and percentage
 
 ```yaml
 card_mod:
@@ -584,7 +590,7 @@ card_mod:
 
 ![img.png](https://github.com/punxaphil/custom-sonos-card/raw/main/img/card_mod_2.png)
 
-### Example 19 - Changing the font size of song title
+#### Example 19 - Changing the font size of song title
 
 ```yaml
 card_mod:
@@ -595,7 +601,7 @@ card_mod:
       }
 ```
 
-### Example 20 - Artwork position
+#### Example 20 - Artwork position
 
 ```yaml
 heightPercentage: auto
@@ -612,7 +618,7 @@ card_mod:
 
 ![img.png](https://github.com/punxaphil/custom-sonos-card/raw/main/img/card_mod_3.png)
 
-### Example 21 - Size of group buttons
+#### Example 21 - Size of group buttons
 
 ```yaml
 card_mod:
@@ -623,7 +629,7 @@ card_mod:
       }
 ```
 
-### Example 22 - Font size for everything
+#### Example 22 - Font size for everything
 
 ```yaml
 card_mod:
@@ -633,7 +639,7 @@ card_mod:
       }
 ```
 
-### Example 23 - Increase entity font
+#### Example 23 - Increase entity font
 ```
 card_mod:
   style:
@@ -643,7 +649,7 @@ card_mod:
       }
 ```
 
-### Example 24 - Hide the select all/none buttons at the top of the groupings page
+#### Example 24 - Hide the select all/none buttons at the top of the groupings page
 ```
 card_mod:
   style:
@@ -653,7 +659,7 @@ card_mod:
       }  
 ```
 
-### Example 25 - reduce min-width of the card
+#### Example 25 - reduce min-width of the card
 ```
 widthPercentage: 30
 card_mod:
@@ -664,7 +670,7 @@ card_mod:
       }  
 ```
 
-### Example 26 - Padding and border around grouping items
+#### Example 26 - Padding and border around grouping items
 ```
 card_mod:
   style: