How to use octicons - 10 common examples
To help you get started, we’ve selected a few octicons examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
devconcept / ng-shopping-cart / docs / base-package / site / app / routes / home / home.component.ts View on Github 
ngOnInit(): void {
const size = {width: 100, height: 100, fill: 'currentColor'};
this.getStarted = this.sanitizer.bypassSecurityTrustHtml(octicons.dashboard.toSVG(size));
this.search = this.sanitizer.bypassSecurityTrustHtml(octicons.search.toSVG(size));
this.examples = this.sanitizer.bypassSecurityTrustHtml(octicons.paintcan.toSVG(size));
}
}ngOnInit() {
this.githubIcon = this.sanitizer.bypassSecurityTrustHtml(octicons['mark-github'].toSVG({fill: 'white'}));
this.searchIcon = this.sanitizer.bypassSecurityTrustHtml(octicons.search.toSVG({style: 'vertical-align:text-bottom;'}));
this.version = this.infoService.getVersion();
this.repoUrl = this.infoService.getRepoUrl();
this.navbar = this.tocService.getNavbarItems();
}ngOnInit(): void {
const size = {width: 100, height: 100, fill: 'currentColor'};
this.getStarted = this.sanitizer.bypassSecurityTrustHtml(octicons.dashboard.toSVG(size));
this.search = this.sanitizer.bypassSecurityTrustHtml(octicons.search.toSVG(size));
this.examples = this.sanitizer.bypassSecurityTrustHtml(octicons.paintcan.toSVG(size));
}
}ngOnInit() {
this.github = this.sanitizer.bypassSecurityTrustHtml(octicons.octoface.toSVG({style: 'vertical-align: middle'}));
this.law = this.sanitizer.bypassSecurityTrustHtml(octicons.law.toSVG({style: 'vertical-align: text-bottom'}));
this.license = this.infoService.getRepoUrl() + '/blob/master/LICENSE';
}
}renderer.heading = (text: string, level: number) => {
const escapedText = text.toLowerCase()
.replace(/[^\w():]+/g, '-')
.replace(/-code-/g, '-')
.replace(/-strong-/g, '')
.replace(/-$/, '')
.replace(/^-/, '')
.replace(/\([a-zA-Z: ]*\)$/, '');
const currentUrl = router.routerState.snapshot.url.split('#')[0].substr(1);
return level >= 4
? `
<a href="${currentUrl}#${escapedText}" class="header" id="${escapedText}">
${octicons.link.toSVG()}
${text}
</a>
`
: `
${text}
`;
};ngOnInit() {
this.github = this.sanitizer.bypassSecurityTrustHtml(octicons.octoface.toSVG({style: 'vertical-align: middle'}));
this.law = this.sanitizer.bypassSecurityTrustHtml(octicons.law.toSVG({style: 'vertical-align: text-bottom'}));
this.license = this.infoService.getRepoUrl() + '/blob/master/LICENSE';
}
}ngOnInit(): void {
const size = {width: 100, height: 100, fill: 'currentColor'};
this.getStarted = this.sanitizer.bypassSecurityTrustHtml(octicons.dashboard.toSVG(size));
this.search = this.sanitizer.bypassSecurityTrustHtml(octicons.search.toSVG(size));
this.examples = this.sanitizer.bypassSecurityTrustHtml(octicons.paintcan.toSVG(size));
}
}this.displayHtml = (largeCurrent) => {
const size = (largeCurrent && this.current()) ? 26 : 18;
let prefix = '';
if (this.isRemote) {
prefix = `<span>${octicons.globe.toSVG({ 'height': size })}</span> `;
}
if (this.isBranch) {
prefix += `<span>${octicons['git-branch'].toSVG({ 'height': size })}</span> `;
} else if (this.isTag) {
prefix += `<span>${octicons.tag.toSVG({ 'height': size })}</span> `;
}
return prefix + this.localRefName;
};
}octicon: (i, options) => {
if (!octicons[i]) {
return new handlebars.SafeString(octicons.question.toSVG());
}
return new handlebars.SafeString(octicons[i].toSVG());
},
eachpath: (path, options) => {constructor(isLarge) {
this.isLarge = isLarge;
this.refreshIcon = octicons.sync.toSVG({ 'height': isLarge ? 26 : 18 });
}octicons
A scalable set of icons handcrafted with <3 by GitHub.
