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>
JSON

Use Case: Music Icons for Audio

I want to display the music note icon for all audio files. 

  1. Open List of supported icons

  2. Find your desired icon and its custom name (last column). 

    1. in this case 'music

  3. Open File Type > AudioMetadata (File Types/FileMetadata/AudioMetadata)

  4. Update the Thumbnail Display Pattern

  5. Add the icon with CSS 

    <cp-icon name="music"></cp-icon>
    CODE


Use Case: Color the Icon in Red

Now I want to change the color of the icon with CSS

  1. Open File Type > AudioMetadata (File Types/FileMetadata/AudioMetadata) again

  2. Update the Thumbnail Display Pattern

  3. Add color with css: color=”red” or color=”#ff0000”

    <cp-icon name="music" color="red"></cp-icon>
    CODE


Use Case: Make the Icon Bigger

Next Goal: Change the font size of the icon with CSS

  1. Open File Type > AudioMetadata (File Types/FileMetadata/AudioMetadata) again

  2. Update the Thumbnail Display Pattern

  3. Add size with css: size=”24”

    1. supported icon sizes are 14 18 24;

      <cp-icon name="music" size="24" color="red"></cp-icon>
      CODE