feat(icons): allow icons to have modifiers

used to display additional icons that augment the meaning, e.g. 'add' a filter or 'remove' a filter closes #806
telerik · Dec 26, 2017 · 91f8204 · 91f8204
1 parent 1d56f99
commit 91f8204
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/scss/common/_icons.scss b/scss/common/_icons.scss
@@ -36,6 +36,19 @@
         }
     }
 
+    .k-icon-with-modifier {
+        position: relative;
+        margin: .25em;
+    }
+
+    .k-icon-modifier {
+        position: absolute;
+        font-size: .5em;
+        bottom: 0;
+        right: 0;
+        margin: 0 -.5em -.5em 0;
+    }
+
     .k-i-none::before {
         content: "";
         display: none;

diff --git a/tests/fixtures/icons.html b/tests/fixtures/icons.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Document</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../../dist/all.css" />
+</head>
+<body>
+
+    <div class="test-area">
+        <span id="icon" class="k-icon k-i-custom"></span>
+        <span id="modified-icon" class="k-icon k-i-filter"><span class="k-icon-modifier k-i-add"></span></span>
+    </div>
+
+</body>
+</html>