Skip to content

Commit c4ad534

Browse files
lorumiclorumic
authored
Merge pull request #5792 from lorumic/stream-controls-icons
feat(icons): add 13 icons for stream control buttons
2 parents a5e2ead + 370bb40 commit c4ad534

7 files changed

Lines changed: 318 additions & 5 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vanilla-framework",
3-
"version": "4.48.0",
3+
"version": "4.49.0",
44
"author": {
55
"email": "webteam@canonical.com",
66
"name": "Canonical Webteam"

‎releases.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
- version: 4.49.0
2+
features:
3+
- component: Icon
4+
url: /docs/patterns/icons
5+
status: New
6+
notes: Added icons for devtools (on/off), keyboard (on/off), resize (on/off), rotate left, rotate right, start/stop screen record, screenshot, volume down, and volume up.
17
- version: 4.48.0
28
features:
39
- component: Card pattern

‎scss/_base_icon-definitions.scss‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1649,3 +1649,174 @@
16491649
@mixin vf-icon-circle-of-friends-themed {
16501650
@include vf-themed-icon($light-value: vf-icon-circle-of-friends-url($colors--light-theme--icon), $dark-value: vf-icon-circle-of-friends-url($colors--dark-theme--icon));
16511651
}
1652+
1653+
// ICONS ADDED IN APRIL 2026 v4.49.0
1654+
1655+
// devtools
1656+
@function vf-icon-devtools-url($color) {
1657+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M10.414 3.469 14.04 8l-3.625 4.531 1.172.938L15.96 8l-4.375-5.469zM.04 8l4.374 5.469 1.172-.938L1.96 8l3.625-4.531-1.172-.938z'/%3E%3C/svg%3E");
1658+
}
1659+
1660+
@mixin vf-icon-devtools($color: $colors--light-theme--icon) {
1661+
background-image: vf-icon-devtools-url($color);
1662+
}
1663+
1664+
@mixin vf-icon-devtools-themed {
1665+
@include vf-themed-icon($light-value: vf-icon-devtools-url($colors--light-theme--icon), $dark-value: vf-icon-devtools-url($colors--dark-theme--icon));
1666+
}
1667+
1668+
// devtools-off
1669+
@function vf-icon-devtools-off-url($color) {
1670+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='m14.78 2.28-1.886 1.886L15.96 8l-4.375 5.469-1.172-.938L14.04 8l-2.213-2.767L2.28 14.78l-1.06-1.06 12.5-12.5zM5.586 3.469 1.96 8l1.323 1.654-1.067 1.068L.039 8l4.375-5.469z'/%3E%3C/svg%3E");
1671+
}
1672+
1673+
@mixin vf-icon-devtools-off($color: $colors--light-theme--icon) {
1674+
background-image: vf-icon-devtools-off-url($color);
1675+
}
1676+
1677+
@mixin vf-icon-devtools-off-themed {
1678+
@include vf-themed-icon($light-value: vf-icon-devtools-off-url($colors--light-theme--icon), $dark-value: vf-icon-devtools-off-url($colors--dark-theme--icon));
1679+
}
1680+
1681+
// keyboard
1682+
@function vf-icon-keyboard-url($color) {
1683+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M5.5 10a.5.5 0 0 0-.5.5v.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-.5a.5.5 0 0 0-.5-.5zM12.5 7.5a.5.5 0 0 0-.5.5v.5a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM10.25 7.5a.5.5 0 0 0-.5.5v.5a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM8 7.5a.5.5 0 0 0-.5.5v.5A.5.5 0 0 0 8 9h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM5.5 7.5A.5.5 0 0 0 5 8v.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM3 7.5a.5.5 0 0 0-.5.5v.5A.5.5 0 0 0 3 9h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM12.5 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5v-.5A.5.5 0 0 0 13 5zM10.25 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5v-.5a.5.5 0 0 0-.5-.5zM8 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5h.5A.5.5 0 0 0 9 6v-.5a.5.5 0 0 0-.5-.5zM5.5 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 .5-.5v-.5A.5.5 0 0 0 6 5zM3 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5h.5A.5.5 0 0 0 4 6v-.5a.5.5 0 0 0-.5-.5z'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2zm13 10.5h-13v-9h13z' clip-rule='evenodd'/%3E%3C/svg%3E");
1684+
}
1685+
1686+
@mixin vf-icon-keyboard($color: $colors--light-theme--icon) {
1687+
background-image: vf-icon-keyboard-url($color);
1688+
}
1689+
1690+
@mixin vf-icon-keyboard-themed {
1691+
@include vf-themed-icon($light-value: vf-icon-keyboard-url($colors--light-theme--icon), $dark-value: vf-icon-keyboard-url($colors--dark-theme--icon));
1692+
}
1693+
1694+
// keyboard-off
1695+
@function vf-icon-keyboard-off-url($color) {
1696+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='#{vf-url-friendly-color($color)}' clip-path='url(%23a)'%3E%3Cpath d='M12.5 7.5a.5.5 0 0 0-.5.5v.5a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5z'/%3E%3Cpath fill-rule='evenodd' d='m.97 14.47 1.06 1.06L3.56 14H14.5a1.5 1.5 0 0 0 1.5-1.5v-9a1.5 1.5 0 0 0-.682-1.258l.712-.712L14.97.47zM14.5 3.5v9H5.06l1-1h4.44a.5.5 0 0 0 .5-.5v-.5a.5.5 0 0 0-.5-.5H7.56l2.27-2.27a.5.5 0 0 0-.08.27v.5a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5h-.5c-.099 0-.19.03-.269.08L12 5.56V6a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5v-.5A.5.5 0 0 0 13 5h-.44l1.5-1.5z' clip-rule='evenodd'/%3E%3Cpath d='M1.5 2A1.5 1.5 0 0 0 0 3.5v9c0 .27.072.523.197.742L1.5 11.94V3.5h8.44l1.5-1.5z'/%3E%3Cpath d='M3 7.5a.5.5 0 0 0-.5.5v.5A.5.5 0 0 0 3 9h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5zM5.5 7.5A.5.5 0 0 0 5 8v.44l.94-.94zM5.5 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 .5-.5v-.5A.5.5 0 0 0 6 5zM3 5a.5.5 0 0 0-.5.5V6a.5.5 0 0 0 .5.5h.5A.5.5 0 0 0 4 6v-.5a.5.5 0 0 0-.5-.5zM8 5a.5.5 0 0 0-.5.5v.44L8.44 5z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M16 0H0v16h16z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
1697+
}
1698+
1699+
@mixin vf-icon-keyboard-off($color: $colors--light-theme--icon) {
1700+
background-image: vf-icon-keyboard-off-url($color);
1701+
}
1702+
1703+
@mixin vf-icon-keyboard-off-themed {
1704+
@include vf-themed-icon($light-value: vf-icon-keyboard-off-url($colors--light-theme--icon), $dark-value: vf-icon-keyboard-off-url($colors--dark-theme--icon));
1705+
}
1706+
1707+
// resize
1708+
@function vf-icon-resize-url($color) {
1709+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M2.5 15H1v-1.5h1.5zM5.375 15h-1.75v-1.5h1.75zM8.875 15h-1.75v-1.5h1.75z'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M5.75 2.5H3.56l9.94 9.94v-2.19H15V15h-4.75v-1.5h2.19L2.5 3.56v2.19H1V1h4.75zM2.5 12.375H1v-1.75h1.5z'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M2.5 8.875H1v-1.75h1.5zM15 8.875h-1.5v-1.75H15zM15 5.375h-1.5v-1.75H15zM8.875 2.5h-1.75V1h1.75zM12.375 2.5h-1.75V1h1.75zM15 2.5h-1.5V1H15z'/%3E%3C/svg%3E");
1710+
}
1711+
1712+
@mixin vf-icon-resize($color: $colors--light-theme--icon) {
1713+
background-image: vf-icon-resize-url($color);
1714+
}
1715+
1716+
@mixin vf-icon-resize-themed {
1717+
@include vf-themed-icon($light-value: vf-icon-resize-url($colors--light-theme--icon), $dark-value: vf-icon-resize-url($colors--dark-theme--icon));
1718+
}
1719+
1720+
// resize-off
1721+
@function vf-icon-resize-off-url($color) {
1722+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cg fill='#{vf-url-friendly-color($color)}' clip-path='url(%23a)'%3E%3Cpath d='m16.03 1.53-2.095 2.095H15v1.75h-1.5V4.061L9.31 8.25l4.19 4.19v-2.19H15V15h-4.75v-1.5h2.19L8.25 9.31 4.06 13.5h1.315V15h-1.75v-1.065L2.03 15.53.97 14.47l14-14z'/%3E%3Cpath d='M8.875 15h-1.75v-1.5h1.75zM2.5 10.94l-1.436 1.435H1v-1.75h1.5zM2.5 8.875H1v-1.75h1.5zM15 8.875h-1.5v-1.75H15zM5.75 2.5H3.56l3.69 3.69-1.06 1.06L2.5 3.56v2.19H1V1h4.75zM8.875 2.5h-1.75V1h1.75zM12.375 1.064 10.94 2.5h-.315V1h1.75z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M0 0h16v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
1723+
}
1724+
1725+
@mixin vf-icon-resize-off($color: $colors--light-theme--icon) {
1726+
background-image: vf-icon-resize-off-url($color);
1727+
}
1728+
1729+
@mixin vf-icon-resize-off-themed {
1730+
@include vf-themed-icon($light-value: vf-icon-resize-off-url($colors--light-theme--icon), $dark-value: vf-icon-resize-off-url($colors--dark-theme--icon));
1731+
}
1732+
1733+
// rotate-left
1734+
@function vf-icon-rotate-left-url($color) {
1735+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M3.682 5.56a1.5 1.5 0 0 1 2.12 0l4.951 4.95a1.5 1.5 0 0 1 0 2.122l-2.121 2.12a1.5 1.5 0 0 1-2.008.103l-.113-.102-4.95-4.95a1.5 1.5 0 0 1 0-2.121zm-1.06 3.182 4.95 4.95 2.12-2.12-4.95-4.95z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M10.03 1.53 8.81 2.75H10a4.75 4.75 0 0 1 4.75 4.75v2h-1.5v-2A3.25 3.25 0 0 0 10 4.25H8.81l1.22 1.22-1.06 1.06L5.94 3.5 8.97.47z'/%3E%3C/svg%3E");
1736+
}
1737+
1738+
@mixin vf-icon-rotate-left($color: $colors--light-theme--icon) {
1739+
background-image: vf-icon-rotate-left-url($color);
1740+
}
1741+
1742+
@mixin vf-icon-rotate-left-themed {
1743+
@include vf-themed-icon($light-value: vf-icon-rotate-left-url($colors--light-theme--icon), $dark-value: vf-icon-rotate-left-url($colors--dark-theme--icon));
1744+
}
1745+
1746+
// rotate-right
1747+
@function vf-icon-rotate-right-url($color) {
1748+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M12.318 5.56a1.5 1.5 0 0 0-2.12 0l-4.951 4.95a1.5 1.5 0 0 0 0 2.122l2.121 2.12a1.5 1.5 0 0 0 2.008.103l.113-.102 4.95-4.95a1.5 1.5 0 0 0 0-2.121zm1.06 3.182-4.95 4.95-2.12-2.12 4.95-4.95z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='m5.97 1.53 1.22 1.22H6A4.75 4.75 0 0 0 1.25 7.5v2h1.5v-2A3.25 3.25 0 0 1 6 4.25h1.19L5.97 5.47l1.06 1.06 3.03-3.03L7.03.47z'/%3E%3C/svg%3E");
1749+
}
1750+
1751+
@mixin vf-icon-rotate-right($color: $colors--light-theme--icon) {
1752+
background-image: vf-icon-rotate-right-url($color);
1753+
}
1754+
1755+
@mixin vf-icon-rotate-right-themed {
1756+
@include vf-themed-icon($light-value: vf-icon-rotate-right-url($colors--light-theme--icon), $dark-value: vf-icon-rotate-right-url($colors--dark-theme--icon));
1757+
}
1758+
1759+
// screen-record-start
1760+
@function vf-icon-screen-record-start-url($color) {
1761+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M13.5 10.25v3.25h-3.25V15h3.25a1.5 1.5 0 0 0 1.5-1.5v-3.25zM1 13.5A1.5 1.5 0 0 0 2.5 15h3.25v-1.5H2.5v-3.25H1zM8 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M8 3.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9M8 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M10.25 2.5h3.25v3.25H15V2.5A1.5 1.5 0 0 0 13.5 1h-3.25zM2.5 1A1.5 1.5 0 0 0 1 2.5v3.25h1.5V2.5h3.25V1z'/%3E%3C/svg%3E");
1762+
}
1763+
1764+
@mixin vf-icon-screen-record-start($color: $colors--light-theme--icon) {
1765+
background-image: vf-icon-screen-record-start-url($color);
1766+
}
1767+
1768+
@mixin vf-icon-screen-record-start-themed {
1769+
@include vf-themed-icon($light-value: vf-icon-screen-record-start-url($colors--light-theme--icon), $dark-value: vf-icon-screen-record-start-url($colors--dark-theme--icon));
1770+
}
1771+
1772+
// screen-record-stop
1773+
@function vf-icon-screen-record-stop-url($color) {
1774+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M13.5 13.5h-3.25V15h3.25a1.5 1.5 0 0 0 1.5-1.5v-3.25h-1.5zM1 13.5A1.5 1.5 0 0 0 2.5 15h3.25v-1.5H2.5v-3.25H1z'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M5.5 4A1.5 1.5 0 0 0 4 5.5v5a1.5 1.5 0 0 0 1.347 1.492L5.5 12h5a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 10.5 4zm5 1.5v5h-5v-5z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M10.25 2.5h3.25v3.25H15V2.5A1.5 1.5 0 0 0 13.5 1h-3.25zM2.5 1A1.5 1.5 0 0 0 1 2.5v3.25h1.5V2.5h3.25V1z'/%3E%3C/svg%3E");
1775+
}
1776+
1777+
@mixin vf-icon-screen-record-stop($color: $colors--light-theme--icon) {
1778+
background-image: vf-icon-screen-record-stop-url($color);
1779+
}
1780+
1781+
@mixin vf-icon-screen-record-stop-themed {
1782+
@include vf-themed-icon($light-value: vf-icon-screen-record-stop-url($colors--light-theme--icon), $dark-value: vf-icon-screen-record-stop-url($colors--dark-theme--icon));
1783+
}
1784+
1785+
// screenshot
1786+
@function vf-icon-screenshot-url($color) {
1787+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M13.5 10.25v3.25h-3.25V15h3.5c.69 0 1.25-.56 1.25-1.25v-3.5zM1 13.75c0 .69.56 1.25 1.25 1.25h3.5v-1.5H2.5v-3.25H1zM8 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M6.854 3.5a.88.88 0 0 0-.773.455L5.5 5H5a1.5 1.5 0 0 0-1.5 1.5V10A1.5 1.5 0 0 0 5 11.5h6a1.5 1.5 0 0 0 1.5-1.5V6.5A1.5 1.5 0 0 0 11 5h-.5l-.58-1.045a.89.89 0 0 0-.774-.455zm2.763 3H11V10H5V6.5h1.382L7.216 5h1.568z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M10.25 2.5h3.25v3.25H15v-3.5C15 1.56 14.44 1 13.75 1h-3.5zM2.25 1C1.56 1 1 1.56 1 2.25v3.5h1.5V2.5h3.25V1z'/%3E%3C/svg%3E");
1788+
}
1789+
1790+
@mixin vf-icon-screenshot($color: $colors--light-theme--icon) {
1791+
background-image: vf-icon-screenshot-url($color);
1792+
}
1793+
1794+
@mixin vf-icon-screenshot-themed {
1795+
@include vf-themed-icon($light-value: vf-icon-screenshot-url($colors--light-theme--icon), $dark-value: vf-icon-screenshot-url($colors--dark-theme--icon));
1796+
}
1797+
1798+
// volume-down
1799+
@function vf-icon-volume-down-url($color) {
1800+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M6.342 2.451C6.988 1.886 8 2.345 8 3.204v9.592c0 .859-1.012 1.318-1.658.753l-2.913-2.55H1.5A1.5 1.5 0 0 1 0 9.5v-3A1.5 1.5 0 0 1 1.5 5h1.929zM3.992 6.5H1.5v3h2.492L6.5 11.694v-7.39z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M16 8.75h-6v-1.5h6z'/%3E%3C/svg%3E");
1801+
}
1802+
1803+
@mixin vf-icon-volume-down($color: $colors--light-theme--icon) {
1804+
background-image: vf-icon-volume-down-url($color);
1805+
}
1806+
1807+
@mixin vf-icon-volume-down-themed {
1808+
@include vf-themed-icon($light-value: vf-icon-volume-down-url($colors--light-theme--icon), $dark-value: vf-icon-volume-down-url($colors--dark-theme--icon));
1809+
}
1810+
1811+
// volume-up
1812+
@function vf-icon-volume-up-url($color) {
1813+
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' fill-rule='evenodd' d='M6.342 2.451C6.988 1.886 8 2.345 8 3.204v9.592c0 .859-1.012 1.318-1.658.753l-2.913-2.55H1.5A1.5 1.5 0 0 1 0 9.5v-3A1.5 1.5 0 0 1 1.5 5h1.929zM3.992 6.5H1.5v3h2.492L6.5 11.694v-7.39z' clip-rule='evenodd'/%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M13.745 7.25H16v1.5h-2.255v2.255h-1.5V8.75H10v-1.5h2.245V5.005h1.5z'/%3E%3C/svg%3E");
1814+
}
1815+
1816+
@mixin vf-icon-volume-up($color: $colors--light-theme--icon) {
1817+
background-image: vf-icon-volume-up-url($color);
1818+
}
1819+
1820+
@mixin vf-icon-volume-up-themed {
1821+
@include vf-themed-icon($light-value: vf-icon-volume-up-url($colors--light-theme--icon), $dark-value: vf-icon-volume-up-url($colors--dark-theme--icon));
1822+
}

‎scss/_patterns_icons.scss‎

Lines changed: 94 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2100,4 +2100,97 @@
21002100
}
21012101
}
21022102

2103-
// **Base and Pattern mixins accurate as of March 2026**
2103+
// ICONS ADDED IN APRIL 2026
2104+
2105+
@mixin vf-p-icon-devtools {
2106+
.p-icon--devtools {
2107+
@extend %icon;
2108+
@include vf-icon-devtools-themed;
2109+
}
2110+
}
2111+
2112+
@mixin vf-p-icon-devtools-off {
2113+
.p-icon--devtools-off {
2114+
@extend %icon;
2115+
@include vf-icon-devtools-off-themed;
2116+
}
2117+
}
2118+
2119+
@mixin vf-p-icon-keyboard {
2120+
.p-icon--keyboard {
2121+
@extend %icon;
2122+
@include vf-icon-keyboard-themed;
2123+
}
2124+
}
2125+
2126+
@mixin vf-p-icon-keyboard-off {
2127+
.p-icon--keyboard-off {
2128+
@extend %icon;
2129+
@include vf-icon-keyboard-off-themed;
2130+
}
2131+
}
2132+
2133+
@mixin vf-p-icon-resize {
2134+
.p-icon--resize {
2135+
@extend %icon;
2136+
@include vf-icon-resize-themed;
2137+
}
2138+
}
2139+
2140+
@mixin vf-p-icon-resize-off {
2141+
.p-icon--resize-off {
2142+
@extend %icon;
2143+
@include vf-icon-resize-off-themed;
2144+
}
2145+
}
2146+
2147+
@mixin vf-p-icon-rotate-left {
2148+
.p-icon--rotate-left {
2149+
@extend %icon;
2150+
@include vf-icon-rotate-left-themed;
2151+
}
2152+
}
2153+
2154+
@mixin vf-p-icon-rotate-right {
2155+
.p-icon--rotate-right {
2156+
@extend %icon;
2157+
@include vf-icon-rotate-right-themed;
2158+
}
2159+
}
2160+
2161+
@mixin vf-p-icon-screen-record-start {
2162+
.p-icon--screen-record-start {
2163+
@extend %icon;
2164+
@include vf-icon-screen-record-start-themed;
2165+
}
2166+
}
2167+
2168+
@mixin vf-p-icon-screen-record-stop {
2169+
.p-icon--screen-record-stop {
2170+
@extend %icon;
2171+
@include vf-icon-screen-record-stop-themed;
2172+
}
2173+
}
2174+
2175+
@mixin vf-p-icon-screenshot {
2176+
.p-icon--screenshot {
2177+
@extend %icon;
2178+
@include vf-icon-screenshot-themed;
2179+
}
2180+
}
2181+
2182+
@mixin vf-p-icon-volume-down {
2183+
.p-icon--volume-down {
2184+
@extend %icon;
2185+
@include vf-icon-volume-down-themed;
2186+
}
2187+
}
2188+
2189+
@mixin vf-p-icon-volume-up {
2190+
.p-icon--volume-up {
2191+
@extend %icon;
2192+
@include vf-icon-volume-up-themed;
2193+
}
2194+
}
2195+
2196+
// **Base and Pattern mixins accurate as of April 2026**

‎scss/standalone/patterns_icons-additional.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@
4545
@include vf-p-icon-credit-card;
4646
@include vf-p-icon-cursor;
4747
@include vf-p-icon-desktop;
48+
@include vf-p-icon-devtools;
49+
@include vf-p-icon-devtools-off;
4850
@include vf-p-icon-disconnect;
4951
@include vf-p-icon-edit;
5052
@include vf-p-icon-error-grey;
@@ -72,6 +74,8 @@
7274
@include vf-p-icon-in-progress;
7375
@include vf-p-icon-inspector-debug;
7476
@include vf-p-icon-iso;
77+
@include vf-p-icon-keyboard;
78+
@include vf-p-icon-keyboard-off;
7579
@include vf-p-icon-loading-steps;
7680
@include vf-p-icon-location;
7781
@include vf-p-icon-lock-locked-active;
@@ -106,8 +110,15 @@
106110
@include vf-p-icon-profiles;
107111
@include vf-p-icon-quote;
108112
@include vf-p-icon-repository;
113+
@include vf-p-icon-resize;
114+
@include vf-p-icon-resize-off;
109115
@include vf-p-icon-restart;
116+
@include vf-p-icon-rotate-left;
117+
@include vf-p-icon-rotate-right;
110118
@include vf-p-icon-revisions;
119+
@include vf-p-icon-screen-record-start;
120+
@include vf-p-icon-screen-record-stop;
121+
@include vf-p-icon-screenshot;
111122
@include vf-p-icon-security-error;
112123
@include vf-p-icon-security-tick;
113124
@include vf-p-icon-security-warning;
@@ -162,6 +173,8 @@
162173
@include vf-p-icon-usb;
163174
@include vf-p-icon-user-group;
164175
@include vf-p-icon-video-play;
176+
@include vf-p-icon-volume-down;
177+
@include vf-p-icon-volume-up;
165178
@include vf-p-icon-vulnerable;
166179
@include vf-p-icon-warning-grey;
167180
@include vf-p-icon-website;

‎templates/docs/examples/patterns/icons/icons-additional.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,21 @@
174174
<i class="p-icon--storage-volume is-dark"></i>
175175
<i class="p-icon--storage-pool is-dark"></i>
176176
<i class="p-icon--storage-bucket is-dark"></i>
177+
178+
<!-- Icons added in April 2026 v4.49 -->
179+
<i class="p-icon--devtools is-dark"></i>
180+
<i class="p-icon--devtools-off is-dark"></i>
181+
<i class="p-icon--keyboard is-dark"></i>
182+
<i class="p-icon--keyboard-off is-dark"></i>
183+
<i class="p-icon--resize is-dark"></i>
184+
<i class="p-icon--resize-off is-dark"></i>
185+
<i class="p-icon--rotate-left is-dark"></i>
186+
<i class="p-icon--rotate-right is-dark"></i>
187+
<i class="p-icon--screen-record-start is-dark"></i>
188+
<i class="p-icon--screen-record-stop is-dark"></i>
189+
<i class="p-icon--screenshot is-dark"></i>
190+
<i class="p-icon--volume-down is-dark"></i>
191+
<i class="p-icon--volume-up is-dark"></i>
177192
</div>
178193

179194
<div>
@@ -344,5 +359,20 @@
344359
<i class="p-icon--storage-volume"></i>
345360
<i class="p-icon--storage-pool"></i>
346361
<i class="p-icon--storage-bucket"></i>
362+
363+
<!-- Icons added in April 2026 v4.49 -->
364+
<i class="p-icon--devtools"></i>
365+
<i class="p-icon--devtools-off"></i>
366+
<i class="p-icon--keyboard"></i>
367+
<i class="p-icon--keyboard-off"></i>
368+
<i class="p-icon--resize"></i>
369+
<i class="p-icon--resize-off"></i>
370+
<i class="p-icon--rotate-left"></i>
371+
<i class="p-icon--rotate-right"></i>
372+
<i class="p-icon--screen-record-start"></i>
373+
<i class="p-icon--screen-record-stop"></i>
374+
<i class="p-icon--screenshot"></i>
375+
<i class="p-icon--volume-down"></i>
376+
<i class="p-icon--volume-up"></i>
347377
</div>
348378
{% endblock %}

0 commit comments

Comments
 (0)