Icons
Icons are pictures or ideograms displayed in applications to assist with navigation, or to represent conceptual ideas or features of a product.
Use icons in text to identify UI elements like a , or to symbolically represent some information, such as a check mark to indicate something is complete.
Medallia documentation has two types of icons available for use:
-
Material font icons — Font images used on the doc portal. Material icons are referenced with
<ph>elements, and they can been styled with CSS. -
SVG icons — Match Medallia Alchemy icons used in applications, and some Font Awesome (FA) icons used in application. SVG files are loaded
<image>elements, however, their appearance is fixed and cannot be changed.
Material font icons
Material font icons from Google are tagged in-line text that render as images, and they can be formatted with CSS stylings.
The Heretto Publish portal provides Material Icons by Google. For a list of the (should be) available fonts, see https://fonts.google.com/icons. Material Icons have the advantage over SVG icons in that they can be styled with CSS. However, they do not provide a means for including Medallia-specific images.
Using Material icons
To use an icon, put the name of the icon in a <ph>, and assign material-"icons material-icons-outined md-18 to the outputclass. For example, the Checkmark icon is named "done"
<ph outputclass="material-icons material-icons-outined md-18">done</ph>The result is:
Available Material icons
Here are the approved icons to use in Medallia documentation:
| Description | Example | Code |
|---|---|---|
| Check mark; completed | <ph outputclass="material-icons material-icons-outlined md-18">done</ph> | |
| Close; not available | <ph outputclass="material-icons material-icons-outlined md-18">close</ph> | |
| Add task; needs approval | <ph outputclass="material-icons material-icons-outlined md-18">add_task</ph> | |
| Clock; has a time component | <ph outputclass="material-icons material-icons-outlined md-18">schedule</ph> | |
| Future action; scheduled to be done | <ph outputclass="material-icons material-icons-outlined md-18">done</ph><ph outputclass="material-icons material-icons-outined md-18">schedule</ph> | |
| Check box ticked; completed or included | <ph outputclass="material-icons material-icons-outlined md-18">check_box</ph | |
| Check box partially complete | <ph outputclass="material-icons material-icons-outlined md-18">indeterminate_check_box</ph> | |
| Check box unselected; incomplete or not started; option not available | <ph outputclass="material-icons-outlined material-icons md-18">check_box_outline_blank</ph> | |
| RSS feed icon | <ph outputclass="material-icons-outlined material-icons md-18">rss_feed</ph> | |
| More vertical | <ph outputclass="material-icons material-icons-outined md-18">more_vert</ph> |
SVG icons
Scaled vector graphic (SVG) icons are image files, and typically correspond to UI elements in Medallia applications.
Scaled vector graphic icons appear in-line in text, and in the pages of the portal. We use SVG icons to render Medallia-specific images. SVG icons cannot be styled with CSS. If you need to apply a CSS style to an icon, consider using one of the Material font icons.
Using SVG icons
- Reference the file the same as any <image>; can be in-line with other text, or stand-alone such as in a table cell
- For icons in text:
- assign icon to the
outputclassattribute to size the image to match the text - DO NOT assign a height or width
- assign icon to the
- For icons not in text:
- (optional) use the icon class to default to 1em height, or
- (optional when needed) set the
heightattribute, preferably to 1em or 1rem
<image href="../_Media/icons_mdla/SettingsIcon.svg" outputclass="icon">
<alt>settings icon</alt>
</image>Here's an example placed in-line in a line of text:
Clicksettings.
Here's a test example when the image is on a line by itself, and height is 3em:
Here's a test example when the image is on a line by itself, and height is 10px:
Here's a test example when the image is on a line by itself, and height is 20px:
Here's a test example when the image is on a line by itself, and height is 30px:
Available SVG icons
SVG icons available for use in documentation.
| Name | Medallia | FA | Notes |
|---|---|---|---|
| Abc icon | — | ||
| Action plans | — | ||
| Add (plus) | |||
| App jobs Q | — | ||
| Area chart | — | ||
| Arrow, down | — | ||
| Arrow, left | — | ||
| Arrow, right | — | ||
| Arrow, up | — | ||
| Arrow circle, right | — | ||
| Arrow circle, right (Decibel) | — | Colored for Decibel | |
| Automations | — | ||
| Bell, outline | |||
| Bell, checked | — | ||
| Bell, filled | — | ||
| Bell, sleeping | — | ||
| Bookmark | — | ||
| Box arrow | — | How different from fa-external-link? | |
| Bubbles | — | Anywhere app | |
| Cancel (X) | — | DO NOT USE; use Material Font icon instead. | |
| Center aligned | — | ||
| Change user | — | ||
| Checkmark | — | DO NOT USE; use Material Font icon instead. | |
| Checkbox, checked | — | ||
| Checkbox, empty | — | Consider Material Font icon instead. | |
| Check, circle green | — | ||
| Check, circle | — | ||
| Circle, filled green | — | ||
| Circle, filled | — | ||
| Close | See fa-times | DO NOT USE; use Material Font icon instead. | |
| Code | — | ||
| Color | — | ||
| Columns | — | ||
| Comment | — | ||
| Comparison chart | — | ||
| Conversation | — | Conversations app | |
| Cookie | — | ||
| Copy | — | ||
| Customer journey | |||
| Dashboard | — | ||
| Data Export | — | ||
| Delete (trashcan) | |||
| Descending columns | — | ||
| Desktop monitor (2) | — | Digital app | |
| Dial | — | ||
| Distribution | — | ||
| Distribution bars | — | ||
| Download | |||
| Drag drop | — | ||
| Dropdown column | — | ||
| Dropdown nested | — | ||
| Duplicate | — | ||
| Edit | |||
| Exact match | — | ||
| Exergy (funnel view) | — | ||
| External link | — | How different from Box Arrow? | |
| Eye, outline | — | ||
| Eye, hidden | — | ||
| Feed (bar view) | — | ||
| Feedback assets | — | ||
| File, text | — | ||
| Filetype, image | — | ||
| Filter (Decibel) | — | Decibel only | |
| Filters | — | ||
| Gear (settings) | |||
| Graph | — | ||
| Help | — | ||
| Home | — | ||
| Horizontal bar chart | — | ||
| Horizontal stacked bar chart | — | ||
| Image | — | ||
| Important | — | ||
| Integrations | — | ||
| Laptop | — | ||
| Left justified | — | ||
| List | — | Called navigation menu | |
| Location marker | — | ||
| Magnifier | Search | ||
| Magnifier, plus | — | ||
| Mail, check, blue (Decibel) | — | Decibel only | |
| Mail, check, white (Decibel) | — | Decibel only | |
| Microphone | — | ||
| Moon | — | Sleep? | |
| More, vertical | — | Called an options menu | |
| Note | — | ||
| Organization | — | ||
| Packages | — | ||
| Pause | |||
| Pie graph | — | ||
| Pin | — | ||
| Play | |||
| Play outline | — | Medallia Video app | |
| Playback | — | ||
| Power | — | ||
| Profiles | — | CX Profiles | |
| Programs | — | ||
| Redo | — | ||
| Refresh | See also Sync | ||
| Reports | — | ||
| Right justified | — | ||
| Rocket | — | Changesets | |
| Rotate, left | — | ||
| Sandbox | — | ||
| Scatter chart | — | ||
| Scissors | — | ||
| Sensitive data | — | ||
| Sentiment | — | ||
| Sentiment Bubble, mixed | — | ||
| Sentiment Bubble, negative | — | ||
| Sentiment Bubble, neutral | — | ||
| Sentiment Bubble, positive | — | ||
| Sentiment Bubble, semi negative | — | ||
| Sentiment Bubble, semi positive | — | ||
| Shared Assets | — | ||
| Stacked bar chart | — | ||
| Star | — | ||
| Support ticket signal | — | ||
| Survey | — | Survey builder app | |
| Switch App | — | ||
| Sync | — | See also Refresh | |
| Table | — | ||
| Tag | — | ||
| Tags | — | ||
| Text analytics | |||
| Times | See CloseIcon | ||
| Times, circle | — | ||
| Times, circle red | — | ||
| Tone | — | ||
| Translations | — | ||
| Tree | — | ||
| Trend | — | ||
| Undo | — | ||
| Upload | |||
| User | |||
| User bubble | Social | ||
| Video | — | ||
| Video wall | — | Strikedeck app | |
| Voices | — | ||
| Volume | — | ||
| Warning | — | ||
| Water drop | — | ||
| Word Cloud | — | ||
| Zingle | — | Zingle app |
