Display Pattern Icons
- Elaine Foley
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 |
 | mdiAlarm | ‘alarm’ | |
 | mdiClockAlert | 'clock-alert' | |
mdiCopyright | 'copyright' | ||
mdiWeb | 'web' | ||
mdiBookmark | 'bookmark' | ||
mdiThumbUp | 'thumb-up' | ||
mdiThumbDown | 'thumb-down' | ||
mdiEye | ‘eye’ | ||
mdiEyeOff | 'eye-off' | ||
mdiAlertCircle | ‘alert-circle’ | ||
mdiAlertRhombus | 'alert-rhombus' | ||
mdiAlert | 'alert' | ||
mdiCurrencyUsd | 'currency-usd' | ||
mdiCurrencyEur | 'currency-eur' | ||
mdiCheckCircle | 'check-circle' | ||
mdiLock | 'lock' | ||
mdiStar | 'star' | ||
mdiShieldStar | 'shield-star' | ||
mdiEmoticonHappyOutline | 'emoticon-happy-outline' | ||
mdiEmoticonHappy | 'emoticon-happy' | ||
mdiImageMultiple | 'image-multiple' | ||
mdiVideo | 'video' | ||
mdiVolumeHigh | 'volume-high' | ||
mdiFile | ‘file’ | ||
mdiTextBox | 'text-box' | ||
mdiFileDocument | 'file-document' | ||
mdiDatabase | 'database' | ||
mdiCamera | 'camera' | ||
mdiCardsHeart | 'cards-heart' | ||
mdiChat | 'chat' | ||
mdiVectorSquare | 'vector-square' | ||
https://materialdesignicons.com/icon/key-variant | mdiKeyVariant | key-variant | |
mdiMusic | 'music' | ||
mdiImage | ‘image’ | ||
mdiVectorPolyline | 'vector-polyline' | ||
mdiVideoImage | 'video-image' | ||
mdiAlertOutline | 'alert-outline' | ||
mdiBrightness1 | 'brightness-1' | ||
mdiCloudOutline | ‘cloud-outline’ | ||
mdiInformation | 'information' | ||
mdiCog | ‘options’ | ||
mdiHelpCircle | 'help-circle' | ||
mdiAccountCheck | 'account-check' | ||
mdiAccountCancel | 'account-cancel' | ||
mdiProgressClock | 'progress-clock' | ||
mdiLinkVariant | 'link-variant' | ||
mdiTagOff | 'tag-off' | ||
mdiTag | 'tag' |