Page Comparison

...

<font<cp-icon colorname="#ff3232music">
	<i class="icon material-icons md-14 icon-music"></i>
</font> size="24" color="red"></cp-icon>

The icons from the Material Design Icons Palette are supported as they are in use in Picturepark already. Check for icons and their names here: https://materialdesignicons.com/

Use Case: Music Icons for Audio

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

...

1. Open Material DesignOpen List of supported icons

2. Find your desired icon and its custom name (you find the custom name by hovering over the iconlast 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 

   Code Block
   <i<cp-icon classname="icon material-icons icon-music"></i>cp-icon>

   
   

Use Case: Color the Icon in Red

...

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

2. Update the Thumbnail Display Pattern

3. Add font color to the icon with CSS  with css: color=”red” or color=”#ff0000”

   Code Block
   <font<cp-icon colorname="#ff5576music"><i classcolor="material-icons icon-musicred"></i></font>cp-icon>

   
   

Use Case: Make the Icon Bigger

...

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

2. Update the Thumbnail Display Pattern

3. Change the icon Add size with md-24 css: size=”24”

   1. supported icon sizes are : 12 14 16 18 20 24 48 96 144;

      Code Block
      <font<cp-icon colorname="#ff3232music"> <i classsize="material-icons md-24 icon-key-variant" color="red"></i> </font>cp-icon>