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
2017-12-21 15:05:26 +02:00 · 2017-12-21 15:05:26 +02:00 · 91f820418c
--- 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;
--- 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>