Custom Icons

[Steven]

I've seen some of the documentation regarding how to create custom icons for Kendo UI Mobile, but can someone please give me an example of how it is applied to the MobileTapStrip in ASP.NET MVC?

Here's what I've tried so far:

<style>
    .km-root .km-pane .km-view .km-home1
    {
        background-image: url("/Images/Icons/home1.png");
    }
</style>

@(Html.Kendo().MobileLayout()
    .Name("mobile-main")
    .Footer(
        @<text>
            @(Html.Kendo().MobileTabStrip()
                .Items(items => {
                    items.Add().Icon("home1").Text("Home").Url("#view-home");
                    items.Add().Icon("cart").Text("Purchases").Url("#view-purchases");
                    items.Add().Icon("bookmarks").Text("Reports").Url("#view-reports");
                })

            )
        </text>
    )
)

OK, I've figured it out:

@(Html.Kendo().MobileLayout()
    .Name("mobile-main")
    .Footer(
        @<text>
            @(Html.Kendo().MobileTabStrip()
                .Items(items => {
                    items.Add().Icon("home1").Text("Home").Url("#view-home");
                    items.Add().Icon("purchases").Text("Purchases").Url("#view-purchases");
                    items.Add().Icon("reports").Text("Reports").Url("#view-reports");
                })

            )
        </text>
    )
)

CSS:

.km-root .km-pane .km-view .km-icon {
    background-size: 100% 100%;
    -webkit-background-clip: border-box;
    background-color: currentcolor;
}

.km-home1 {
    -webkit-mask-box-image: url("/Images/Icons/home1.png");
    background-color: red;
}

.km-purchases {
    -webkit-mask-box-image: url("/Images/Icons/money.png");
    background-color: red;
}

.km-reports {
    -webkit-mask-box-image: url("/Images/Icons/documents.png");
    background-color: red;
}