How to add Microsoft’s Segoe MDL2 icons to your project

For displaying Microsoft’s SegoeUI MDL2 icons you need SegoeMDL2.woff file. If you have that file you can link it to your project by writing styles like this below.

@font-face {
font-family: 'SegoeUI MDL2 Assets';
font-style: normal;
font-weight: normal;
src: local('../fonts/SEGMDL2'), url('../fonts/SEGMDL2.woff') format('woff');
}

After adding required styles you need unicodes for displaying icons in html file. You can find SegoeUI icon unicodes on this website: https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font

Displaying SegoeUI icon font is similar to FontAwesome. You need to add proper styles and its unicode to display icon in html. I will give you the css code to display the icons.

.icon {
    font-family: "SegoeUI MDL2 Assets";
    font-weight: normal;
    font-style: normal;
    position: relative;
    font-size: 20px;
    display: inline-block;
    line-height: 1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
}

.icon-dashboard:before {
    content: "\E74C";
}

HTML code will be like this:

<i class="icon icon-dashboard" aria-hidden="true"></i>

Download Microsoft’s SegoeUI MDL2 woff file Mirror1 Mirror2


Buy me a coffeeBuy me a coffee
Facebooktwittergoogle_plusredditpinterestlinkedinmail