Display Pattern: Using Icons, HTML and CSS
Summary
I want to add red, large music icons for audio files.
supported icon sizes are: 14 18 24
<cp-icon name="music" size="24" color="red"></cp-icon>
The use of icons is limited. Please check this list for supported icons in Display Pattern.
Use Case: Music Icons for Audio
I want to display the music note icon for all audio files.

Find your desired icon and its custom name (last column).
in this case 'music'
Open File Type > AudioMetadata (File Types/FileMetadata/AudioMetadata)
Update the Thumbnail Display Pattern
Add the icon with CSS
CODE<cp-icon name="music"></cp-icon>
Use Case: Color the Icon in Red
Now I want to change the color of the icon with CSS

Open File Type > AudioMetadata (File Types/FileMetadata/AudioMetadata) again
Update the Thumbnail Display Pattern
Add color with css: color=”red” or color=”#ff0000”
CODE<cp-icon name="music" color="red"></cp-icon>
Use Case: Make the Icon Bigger
Next Goal: Change the font size of the icon with CSS
Open File Type > AudioMetadata (File Types/FileMetadata/AudioMetadata) again
Update the Thumbnail Display Pattern
Add size with css: size=”24”
supported icon sizes are 14 18 24;
CODE<cp-icon name="music" size="24" color="red"></cp-icon>