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.
![](../__attachments/187533396/image2018-4-10_13-30-45.png?inst-v=514d66ce-ccab-46bd-8e19-a2e296946d79)
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.
![](../__attachments/187533396/image2018-4-10_17-11-24.png?inst-v=514d66ce-ccab-46bd-8e19-a2e296946d79)
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>