I've been mapping my information and the problem occurs when I want to change the color of an SVG when the hover event occurs. This is my code:
{DataBanner.map((d, index) => (
<div>
<img
src={d.icon}
className="icon-image"
/>
</div>
))}
css styles:
.icon-image:hover {
stroke: white !important;
}
this is an example of how the SVG comes:
<svg width="39" height="57" viewBox="0 0 39 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.2799 47.7309V55.874H28.9356M10.1257 8.61963H1.29419V28.2326M1.29419 28.2326V55.874H28.9356M1.29419 28.2326L28.9356 55.874M10.8137 37.6377V1.39404H37.882V47.6161H20.7923M31.0791 13.4712V19.6147M28.0073 16.543H34.1509M25.467 14.7114C25.467 17.191 23.6909 19.2012 21.5 19.2012C19.3091 19.2012 17.533 17.191 17.533 14.7114C17.533 12.2318 19.3091 10.2217 21.5 10.2217C23.6909 10.2217 25.467 12.2318 25.467 14.7114ZM28.657 27.3237C28.657 31.1247 25.4527 31.3704 21.5 31.3704C17.5473 31.3704 14.343 31.1247 14.343 27.3237C14.343 23.5227 17.5473 20.4414 21.5 20.4414C25.4527 20.4414 28.657 23.5227 28.657 27.3237Z" stroke="black"/>
</svg>
This would not work because the SVG is now imported as an image. To do this usually, you would have to paste the SVG code manually into your markup or import as a component.
I think you should go through this resource: https://www.sanity.io/guides/import-svg-files-in-react. It explains what you are trying to do and the solution I mentioned as well.
Example of SVG in JSX attached. Attributes should be in camel case
Material icons are easy to use and usually look great. However I now need to size them down:
<div class="status-icon">
<mat-icon>
remove_circle_outline
</mat-icon>
</div>
.status-icon {
.material-icons {
font-size: 16px !important;
}
}
Well, it works, but the result looks a bit fuzzy. The lines are far from beeing sharp.
So I downloaded the original SVG and added it directly:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16" width="16">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>
And it looks perfectly. No matter how small or big the SVG is scaled it looks great.
I thought MatIcon is using SVGs as well. If not, what image format is it using? And is there an easy way to tell MatIcon to use the SVG format?
Angular material icons are using font icons, so while they are scalable, they can still have aliasing issues as you are probably seeing.
The SVGs are not built into the standard mat-icon, but you can register your own svg icons and use them the same way.
Once registered, you would render an svg icon like this:
<mat-icon svgIcon="thumbs-up"></mat-icon>
TS:
import {Component} from '#angular/core';
import {DomSanitizer} from '#angular/platform-browser';
import {MatIconRegistry} from '#angular/material/icon';
/**
* #title SVG icons
*/
#Component({
selector: 'icon-svg-example',
templateUrl: 'icon-svg-example.html',
})
export class IconSvgExample {
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIcon(
'thumbs-up',
sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
}
}
https://material.angular.io/components/icon/overview
I grabbed an SVG file, a map of NY State, and would like to add classes to various elements (the counties).
I tried adding a class via javascript. The class was added but visually nothing happened. I tried inserting the class directly. That didn't work. I tried adding a fill to an existing ID but that didn't do anything.
The existing code looks something like:
<polygon id="St_Lawrence" class="highlight" points="404.480957,7.098633
As said I tried adding a class, adding fill information to the existing ID (St_Lawrence) but that didn't work. However adding a style inline worked (see below)
<polygon id="St_Lawrence" style="fill:#FF0000;" points="404.480957,7.098633
That, unfortunately, doesn't really help.
The basic code is below:
<svg xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
width="633.475098" height="475.573242" viewBox="0 0 633.475098 475.573242"
style="overflow:visible;enable-background:new 0 0 633.475098 475.573242" xml:space="preserve">
<g id="Layer_1">
<g fill="#FFFFFF" stroke="#000000" stroke-width="0.25">
<polygon id="St_Lawrence" points="404.480957,7.098633 404.581543,7.098633 404.581543,7.098633
406.171387,7.099609 406.171387,7.099609 406.218262,7.109375 406.218262,7.109375 406.313965,7.109375 408.001465,7.123047
408.001465,7.123047 408.050293,7.123047 408.050293,7.123047 410.122559,7.138672 410.591309,11.53125 410.591309,11.53125
EDIT:
I worked with another SVG file and got classes to work as they should. Don't know SVG well enough to decipher why this one works while the first one doesn't.
You can use CSS styles (whether based on class, id, or some other CSS selector) in SVG. It's a little tricky to mix inline attributes (such as individual fill="blue"), the style attribute (e.g. style="fill: blue;"), and stylesheets, because SVG doesn't interpret them in the order of precedence you might expect (or at least, I expect).
In the above map, id-based selectors are probably going to be more convenient, because the counties are named by id.
Here's an example of CSS styling by id:
<svg xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
width="633.475098" height="475.573242" viewBox="0 0 633.475098 475.573242"
style="overflow:visible;enable-background:new 0 0 633.475098 475.573242" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:0.25;}
.st1{fill:none;stroke:#000044;stroke-width:0.5;}
#St_Lawrence {
fill: blue; fill-opacity: 0.3;
}
#Queens {
fill: orange; fill-opacity: 0.9;
}
]]>
</style>
(with the rest of the document the same)
This highlights the two counties with fill colors:
Works fine with the following:
<style type="text/css">
<![CDATA[
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:0.25;}
.st1{fill:none;stroke:#000044;stroke-width:0.5;}
.highlight{fill:#00ff00;stroke:#000044;stroke-width:0.5;}
]]>
</style>
<g fill="#FFFFFF" stroke="#000000" stroke-width="0.25">
<polygon id="St_Lawrence" class="highlight" points="404.480957,7.098633
However, <polygon> already has a class="st0" which has a fill:#FFFFFF, so you probably want to change or remove the st0 class.
As a test you could just add .st0:hover{fill:red;} which will highlight the county when the mouse is moved over it:
<style type="text/css">
<![CDATA[
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:0.25;}
.st0:hover{fill:red;}
.st1{fill:none;stroke:#000044;stroke-width:0.5;}
]]>
</style>
You need to apply the style to the icon enclosed in the <path> tag: style="stroke:var(--button-bg-color)"
<svg width="32" height="62" viewBox="0 0 32 62" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 37L31 31C31 31 27.3431 27.3431 25 25" style="stroke:var(--button-bg-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31 61C14.4315 61 1 47.5685 1 31C1 14.4315 14.4315 1 31 1" stroke="#C4C4C4"/>
</svg>
I have several SVG graphics I'd like to modify the colors of via my external style sheets - not directly within each SVG file. I'm not putting the graphics in-line, but storing them in my images folder and pointing to them.
I have implemented them in this way to allow tooltips to work, and I also wrapped each in an <a> tag to allow a link.
<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>
And here is the code of the SVG graphic:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......./>
</g>
</svg>
I put the following in my external CSS file (main.css):
.socIcon g {fill:red;}
Yet it has no effect on the graphic. I also tried .socIcon g path {} and .socIcon path {}.
Something isn't right, perhaps my implementation doesn't allow external CSS modifications, or I missed a step? I'd really appreciate your help! I just need the ability to modify the colors of the SVG graphic via my external stylesheet, but I cannot lose the tooltip and link ability (I may be able to live without tooltips though).
Your main.css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML:
https://developer.mozilla.org/en/docs/SVG_In_HTML_Introduction
<html>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......."/>
</g>
</svg>
</html>
If you want to keep your SVG in files, the CSS needs to be defined inside of the SVG file.
You can do it with a style tag:
http://www.w3.org/TR/SVG/styling.html#StyleElementExample
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="50px" height="50px" viewBox="0 0 50 50">
<defs>
<style type="text/css"><![CDATA[
.socIcon g {
fill:red;
}
]]></style>
</defs>
<g>
<path d="M28.44......./>
</g>
</svg>
You could use a tool on the server side to update the style tag depending on the active style. In ruby you could achieve this with Nokogiri. SVG is just XML. So there are probably many XML libraries available that can probably achieve this.
If you're not able to do that, you will have to just have to use them as though they were PNGs; creating a set for each style, and saving their styles inline.
You can do what you want, with one (important) caveat: the paths within your symbol can't be styled independently via external CSS -- you can only set the properties for the entire symbol with this method. So, if you have two paths in your symbol and want them to have different fill colors, this won't work, but if you want all your paths to be the same, this should work.
In your html file, you want something like this:
<style>
.fill-red { fill: red; }
.fill-blue { fill: blue; }
</style>
<a href="//www.example.com/">
<svg class="fill-red">
<use xlink:href="images/icons.svg#example"></use>
</svg>
</a>
And in the external SVG file you want something like this:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="example" viewBox="0 0 256 256">
<path d="M120...." />
</symbol>
</svg>
Swap the class on the svg tag (in your html) from fill-red to fill-blue and ta-da... you have blue instead of red.
You can partially get around the limitation of being able to target the paths separately with external CSS by mixing and matching the external CSS with some in-line CSS on specific paths, since the in-line CSS will take precedence. This approach would work if you're doing something like a white icon against a colored background, where you want to change the color of the background via the external CSS but the icon itself is always white (or vice-versa). So, with the same HTML as before and something like this svg code, you'll get you a red background and a white foreground path:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="example" viewBox="0 0 256 256">
<path class="background" d="M120..." />
<path class="icon" style="fill: white;" d="M20..." />
</symbol>
</svg>
You can include in your SVG files link to external css file using:
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
You need to put this after opening tag:
<svg>
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/>
<g>
<path d=.../>
</g>
</svg>
It's not perfect solution, because you have to modify svg files, but you modify them once and than all styling changes can be done in one css file for all svg files.
It is possible to style an SVG by dynamically creating a style element in JavaScript and appending it to the SVG element. Hacky, but it works.
<object id="dynamic-svg" type="image/svg+xml" data="your-svg.svg">
Your browser does not support SVG
</object>
<script>
var svgHolder = document.querySelector('object#dynamic-svg');
svgHolder.onload = function () {
var svgDocument = svgHolder.contentDocument;
var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");
// Now (ab)use the #import directive to load make the browser load our css
style.textContent = '#import url("/css/your-dynamic-css.css");';
var svgElem = svgDocument.querySelector('svg');
svgElem.insertBefore(style, svgElem.firstChild);
};
</script>
You could generate the JavaScript dynamically in PHP if you want to - the fact that this is possible in JavaScript opens a myriad of possibilities.
One approach you can take is just to use CSS filters to change the appearance of the SVG graphics in the browser.
For example, if you have an SVG graphic that uses a fill color of red within the SVG code, you can turn it purple with a hue-rotate setting of 180 degrees:
#theIdOfTheImgTagWithTheSVGInIt {
filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
-ms-filter: hue-rotate(180deg);
}
Experiment with other hue-rotate settings to find the colors you want.
To be clear, the above CSS goes in the CSS that is applied to your HTML document. You are styling the img tag in the HTML code, not styling the code of the SVG.
And note that this won’t work with graphics that have a fill of black or white or gray. You have to have an actual color in there to rotate the hue of that color.
It should be possible to do by first inlining the external svg images. The code below comes from replace all SVG images with inline SVG by Jess Frazelle.
$('img.svg').each(function(){
var $img = $(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// Add replaced image's ID to the new SVG
if (typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if (typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http:validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
});
});
A very quick solution to have dynamic style with an external css stylesheet, in case you are using the <object> tag to embed your svg.
This example will add a class to the root <svg> tag on click on a parent element.
file.svg :
<?xml-stylesheet type="text/css" href="../svg.css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="">
<g>
<path/>
</g>
</svg>
html :
<a class="parent">
<object data="file.svg"></object>
</a>
Jquery :
$(function() {
$(document).on('click', '.parent', function(){
$(this).find('object').contents().find('svg').attr("class","selected");
}
});
on click parent element :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="" class="selected">
then you can manage your css
svg.css :
path {
fill:none;
stroke:#000;
stroke-miterlimit:1.41;
stroke-width:0.7px;
}
.selected path {
fill:none;
stroke:rgb(64, 136, 209);
stroke-miterlimit:1.41;
stroke-width:0.7px;
}
For External styles
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<style>
#import url(main.css);
</style>
<g>
<path d="M28.44......./>
</g>
</svg>
For Internal Styles
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<style>
.socIcon g {fill:red;}
</style>
<g>
<path d="M28.44......./>
</g>
</svg>
Note: External Styles will not work if you include SVG inside <img> tag. It will work perfectly inside <div> tag
When used in an <image> tag SVG must be contained in a single file for privacy reasons. This bugzilla bug has more details on exactly why this is so. Unfortunately you can't use a different tag such as an <iframe> because that won't work as a link so you'll have to embed the CSS in a <style> tag within the file itself.
One other way to do this would be to have the SVG data within the main html file i.e.
<a href='http://youtube.com/...' target='_blank'>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path d="M28.44......./>
</g>
</svg>
</a>
You could style that with an external CSS file using the HTML <link> tag.
What works for me: style tag with #import rule
<defs>
<style type="text/css">
#import url("svg-common.css");
</style>
</defs>
#leo here is the angularJS version, thanks again
G.directive ( 'imgInlineSvg', function () {
return {
restrict : 'C',
scope : true,
link : function ( scope, elem, attrs ) {
if ( attrs.src ) {
$ ( attrs ).each ( function () {
var imgID = attrs.class;
var imgClass = attrs.class;
var imgURL = attrs.src;
$.get ( imgURL, function ( data ) {
var $svg = $ ( data ).find ( 'svg' );
if ( typeof imgID !== 'undefined' ) {
$svg = $svg.attr ( 'id', imgID );
}
if ( typeof imgClass !== 'undefined' ) {
$svg = $svg.attr ( 'class', imgClass + ' replaced-svg' );
}
$svg = $svg.removeAttr ( 'xmlns:a' );
elem.replaceWith ( $svg );
} );
} );
}
}
}
} );
In my case, I have applied display:block in outer class.
Need to experiment, where it fits.
Inside inline svg adding class and style does not even remove the above white-space.
See: where the display:block gets applied.
<div class="col-3 col-sm-3 col-md-2 front-tpcard"><a class="noDecoration" href="#">
<img class="img-thumbnail img-fluid"><svg id="Layer_1"></svg>
<p class="cardtxt">Text</p>
</a>
</div>
The class applied
.front-tpcard .img-thumbnail{
display: block; /*To hide the blank whitespace in svg*/
}
This worked for me.
Inner svg class did not worked
I know its an old post, but just to clear this problem... you're just using your classes at the wrong place :D
First of all you could use
svg { fill: red; }
in your main.css to get it red. This does have effect. You could probably use node selectors as well to get specific paths.
Second thing is, you declared the class to the img-tag.
<img class='socIcon'....
You actually should declare it inside your SVG. if you have different paths you could define more of course.
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path class="myClassForMyPath" d="M28.44......./>
</g>
</svg>
Now you could change the color in your main.css like
.myClassForMyPath {
fill: yellow;
}
As described in answers here and in other related questions, stylesheets only apply to the current DOM. As such, you need to make the svg part of the document's DOM, by inlining it inside the html, or including it inside the DOM using javascript.
That's what I ended up doing there:
<object type="image/svg+xml" data="illustration.svg"
onload="this.parentNode.replaceChild(this.contentDocument.documentElement, this);">
</object>
While that solution works really well for me, only use it on documents you control, as inline loading an svg from an untrusted source gives that source the ability to include at least arbitrary scripts, css and other elements inside your HTML, breaking the sandbox.
I haven't investigated how well caching works with this, but it should work as well as with img tags, given that the javascript function is ran after the element loads. Feel free to edit this.
If javascript is disabled, the svg is not included into the DOM, and the style is not applied, so make sure the default style is usable. CSS custom properties (variables) with fallbacks work quite well for that use-case.
Not fully tested yet, but Ive found a nice way to treat external svg files like inlines. No Javascript, no server-code - just a document root-id:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="svgroot">...
After this we're allowed to use it with an SVG2-Tag which seems to be supported by Chrome/Edge - Blink; Firefox - Gecko; Safari - Webkit:
<html>
<head>
<style>
.primary-text {
color: green;
}
.icon {
height: 100px;
width: 100px;
fill: currentColor;
}
</style>
</head>
<body>
<h3>svg Fill currentColor</h3>
<svg class="primary-text icon">
<use href="example.svg#svgroot"></use>
</svg>
</body>
</html>
Going further, you're able to create a resource-dictionary/sprite file:
<svg xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 512 512" id="apple">...
<svg viewBox="0 0 512 512" id="peach">...
</svg>
Honestly, this seems too good to be true... :D
// Edit:
This seems to be a well respected approach:
https://icons.getbootstrap.com/#usage
"I am actually going to change the colors of these images based on what color scheme the user has chosen for my site." - Jordan 10 hours ago
I suggest you to use PHP for this. There's really no better way to do this without icon fonts, and if you resist using them, you could try this:
<?php
header('Content-Type: image/svg+xml');
echo '<?xml version="1.0" encoding="utf-8"?>';
$color = $_GET['color'];
?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<g>
<path fill="<?php echo $color; ?>" d="M28.44..."/>
</g>
</svg>
And later you could use this file as filename.php?color=#ffffff to get the svg file in the desired color.
This method will work if the svg is viewed within a web browser but as soon as this code is uploaded to the sever and the class for the svg icon is coded as if it was a background image the color is lost and back to the default color. Seems like the color can not be changed from the external style sheet even though both the svg class for the color and the top layer class for the display and position of the svg are both mapped to the same directory.
I was wondering if it's possible to use Polymer's core-icons.html file to display an icon as a background-image in CSS. What I want is to reference an icon in my stylesheet like this:
#arrow-forward {
background-image: url(route to polymer icon/arrow-forward.svg);
}
So far I've tried this without success:
#arrow-forward {
background-image: url(bower_components/core-icons/core-icons.html/arrow-forward.svg);
}
I'm wanting to do this so that I can easily create more customized controls for image sliders/other plugins.
You can't directly reference core-icons (or the the upcoming iron-icons) for use in CSS because they don't exist as files/base64 data. If you look in the source code for core-icons.html, you'll see why your reference doesn't work; the icons are svg paths:
<!--
...
#group Polymer Core Elements
#homepage polymer.github.io
-->
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-iconset-svg/core-iconset-svg.html">
<core-iconset-svg id="icons" iconSize="24">
<svg><defs>
<g id="3d-rotation"><path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z"/></g>
<g id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/></g>
...
I'm wanting to do this so that I can easily create more customized
controls for image sliders/other plugins.
Polymer's world view is that elements are composable and core-icon is no exception, allowing you to do accomplish your goal without without using the svg's directly in your css.
You can style core-icon:
<style>
core-icon[icon="cancel"] {
color: red;
width: 48px;
height: 48px;
}
</style>
<core-icon icon="cancel"></core-icon>
You can compose other elements with core-icon as well:
<core-menu-button icon="menu">
<core-item icon="settings" label="Settings"></core-item>
</core-menu-button>
This only touches on the surface, and I highly recommend reading the documentation on core-icon, which gives further examples.