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, and 24
<cp-icon name="music" size="24" color="red"></cp-icon>
The use of icons is limited. See 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 the icon you want to use 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, and 24;
CODE<cp-icon name="music" size="24" color="red"></cp-icon>