JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/wheelnav.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/raphael.min.js"></script>
	<div id='main_menu'></div>

CSS

#main_menu > svg { width: 100%; height: 100%; }
#main_menu { height: 440px; width: 440px; margin:auto; }

#main_menu tspan{
    font-family: FontAwesome;
    font-size: 22px;
}

/* First child in Main Menu is always an icon */
#main_menu tspan:first-child {
    font-size: 40px; /* Icon size */
}

JavaScript

var icons = {
        'section_sign': '\u00A7\n',
        'key': '\uf084\n',
        'cogs': '\uf085\n',
     };

var items = [ {title: icons.key + 'Security&\nPasswords'},
              {title: icons.cogs + 'Settings&\nDevice'},
              {title: icons.section_sign + 'Rules&\nLaw'} ];

var piemenu = new wheelnav('main_menu');
piemenu.initWheel(items.map(function(item){
                                        return item.title;
                                    }));
piemenu.createWheel();