Summary

I want to add red, large music icons for audio files.

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

<font color="#ff3232">
	<i class="icon material-icons md-48 icon-music"></i>
</font>
JSON

The use of icons in HTML and CSS is not recommended. The icon set will be replaced in the foreseeable future. Avoid using icons. 

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 Design

  2. Find your desired icon and its custom name (you find the custom name by hovering over the icon). 

    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 

    <i class="icon material-icons icon-music"></i>
    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 font color to the icon with CSS  

    <font color="#ff5576"><i class="material-icons icon-music"></i></font>
    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. Change the icon size with md-24

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

      <font color="#ff3232">
      	<i class="material-icons md-24 icon-key-variant"></i>
      </font>
      CODE