Display Pattern Icons

The icons you can use in Display Pattern are limited to the ones listed below. Support for other icons will be removed with Version 11.2 (January 2022).

Icons can be added like this, with CSS properties:

<cp-icon name="video" size="24" color="red"></cp-icon> <cp-icon name="alarm " size="18" color="#ffff00"></cp-icon>
  • The name property identifies the icon that will be loaded. Supported names are listed below.

  • The size identifies the dimension. It can be omitted and by default will use the value: "18".

    • Supported sizes: 14, 18, 24

Icon

Permalink

Path

Name in DisplayPattern

Material Design Icons - Icon Library - Pictogrammers

mdiAlarm

‘alarm’

Material Design Icons - Icon Library - Pictogrammers

mdiClockAlert

'clock-alert'



Material Design Icons - Icon Library - Pictogrammers

mdiCopyright

'copyright'



Material Design Icons - Icon Library - Pictogrammers

mdiWeb

'web'

Material Design Icons - Icon Library - Pictogrammers

mdiBookmark 

'bookmark'

Material Design Icons - Icon Library - Pictogrammers

mdiThumbUp 

'thumb-up'

Material Design Icons - Icon Library - Pictogrammers

mdiThumbDown

'thumb-down'

Material Design Icons - Icon Library - Pictogrammers

mdiEye

‘eye’

Material Design Icons - Icon Library - Pictogrammers

mdiEyeOff

'eye-off'

Material Design Icons - Icon Library - Pictogrammers

mdiAlertCircle

‘alert-circle’

Material Design Icons - Icon Library - Pictogrammers

mdiAlertRhombus

'alert-rhombus'

Material Design Icons - Icon Library - Pictogrammers

mdiAlert

'alert'

Material Design Icons - Icon Library - Pictogrammers  

mdiCurrencyUsd 

'currency-usd'

Material Design Icons - Icon Library - Pictogrammers

mdiCurrencyEur

'currency-eur'

Material Design Icons - Icon Library - Pictogrammers

mdiCheckCircle

'check-circle'

https://materialdesignicons.com/icon/lock

mdiLock 

'lock'

https://materialdesignicons.com/icon/star

mdiStar 

'star'

https://materialdesignicons.com/icon/shield-star

mdiShieldStar

'shield-star'

https://materialdesignicons.com/icon/emoticon-happy-outline

mdiEmoticonHappyOutline

'emoticon-happy-outline'

https://materialdesignicons.com/icon/emoticon-happy

mdiEmoticonHappy

'emoticon-happy'

https://materialdesignicons.com/icon/image-multiple

mdiImageMultiple

'image-multiple'

https://materialdesignicons.com/icon/video

mdiVideo

'video'

https://materialdesignicons.com/icon/volume-high

mdiVolumeHigh

'volume-high'

https://materialdesignicons.com/icon/file

mdiFile

‘file’

https://materialdesignicons.com/icon/text-box

mdiTextBox

'text-box'

https://materialdesignicons.com/icon/file-document

mdiFileDocument

'file-document'

https://materialdesignicons.com/icon/database

mdiDatabase

'database'

https://materialdesignicons.com/icon/camera

mdiCamera

'camera'

https://materialdesignicons.com/icon/cards-heart

mdiCardsHeart

'cards-heart'

https://materialdesignicons.com/icon/chat

mdiChat 

'chat'

https://materialdesignicons.com/icon/vector-square

mdiVectorSquare

'vector-square'

https://materialdesignicons.com/icon/key-variant



mdiKeyVariant

key-variant

https://materialdesignicons.com/icon/music

mdiMusic

'music'

https://materialdesignicons.com/icon/image

mdiImage

‘image’

https://materialdesignicons.com/icon/vector-polyline

mdiVectorPolyline

'vector-polyline'

https://materialdesignicons.com/icon/video-image

mdiVideoImage

'video-image'

https://materialdesignicons.com/icon/alert-outline

mdiAlertOutline

'alert-outline'

https://materialdesignicons.com/icon/brightness-1

mdiBrightness1

'brightness-1'

https://materialdesignicons.com/icon/cloud-outline

mdiCloudOutline

‘cloud-outline’

https://materialdesignicons.com/icon/information

mdiInformation

'information'

https://materialdesignicons.com/icon/cog

mdiCog

‘options’

https://materialdesignicons.com/icon/help-circle  

mdiHelpCircle

'help-circle'



https://materialdesignicons.com/icon/account-check  

mdiAccountCheck

'account-check'



https://materialdesignicons.com/icon/account-cancel  

mdiAccountCancel

'account-cancel'

https://materialdesignicons.com/icon/progress-clock  

mdiProgressClock

'progress-clock'

https://materialdesignicons.com/icon/link-variant  

mdiLinkVariant

'link-variant'

https://materialdesignicons.com/icon/tag-off  

mdiTagOff

'tag-off'

https://materialdesignicons.com/icon/tag  

mdiTag 

'tag'