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>
CODE
  • 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

https://materialdesignicons.com/icon/alarm

mdiAlarm

‘alarm’

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

mdiClockAlert

'clock-alert'


https://materialdesignicons.com/icon/copyright

mdiCopyright

'copyright'


https://materialdesignicons.com/icon/web

mdiWeb

'web'

https://materialdesignicons.com/icon/bookmark

mdiBookmark 

'bookmark'

https://materialdesignicons.com/icon/thumb-up

mdiThumbUp 

'thumb-up'

https://materialdesignicons.com/icon/thumb-down

mdiThumbDown

'thumb-down'

https://materialdesignicons.com/icon/eye

mdiEye

‘eye’

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

mdiEyeOff

'eye-off'

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

mdiAlertCircle

‘alert-circle’

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

mdiAlertRhombus

'alert-rhombus'

https://materialdesignicons.com/icon/alert

mdiAlert

'alert'

https://materialdesignicons.com/icon/currency-usd  

mdiCurrencyUsd 

'currency-usd'

https://materialdesignicons.com/icon/currency-eur

mdiCurrencyEur

'currency-eur'

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

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'