I'm working on my first Electron app and attempting to make a custom title bar. I have designed it all and now I'm trying to add in a custom exit button icon. On load the console is showing me this error -
Refused to load the stylesheet 'https://fonts.googleapis.com/icon?family=Material+Icons' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.
Here is my code
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="./styles.css" rel="stylesheet">
<link rel="stylesheet" href="./titlebar.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script defer src="./titlebar.js"></script>
<title>Hello World!</title>
</head>
<body>
<div id="titlebar" class="drag">
<div id="other-buttons">
<p>this is the title bar</p>
</div>
<div id="control-buttons">
<button id="minBtn" class="no-drag ctrlBtn" title="Minimize">-</button>
<button id="maxBtn" class="no-drag ctrlBtn" title="Maximize">O</button>
<i id="closeBtn" class="no-drag ctrlBtn" title="Close"></i>
<span class="material-icons-outlined"></span>
</div>
</div>
<div>
<span>hey</span>
</div>
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
I can fix this by commenting out the meta tag security policy in the head. But the icon still doesn't show and instead I get -
Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security Policy set or a policy with "unsafe-eval" enabled. This exposes users of this app to unnecessary security risks.
Is there a way I can fix both issues and get the icon to load?