Custom icons for plugins

Hello! I created my first plugin, and want to give it an appropriate icon in the ribbon. I eventually figured out how to change the ribbon icon to another built-in one, but it would be nicer to add a custom one instead. I see there’s an addIcon() method. Has anyone used it successfully? How’d you do it?

3 Likes

I believe you can do something like:

addIcon("my-icon", '<path d="M21,11h-0.17c-1.053,0-1.958-0.669-2.357-1.644c-0.007-0.017-0.014-0.032-0.021-0.049c-0.408-0.977-0.249-2.097,0.5-2.846 l0.119-0.119c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0l-0.119,0.119c-0.749,0.749-1.869,0.908-2.846,0.5 c-0.017-0.007-0.032-0.014-0.049-0.021C13.669,5.128,13,4.218,13,3.165c0-0.052,0-0.081,0-0.081C13,2.447,12.553,2,12,2 s-1,0.447-1,1v0.036c0,1.096-0.66,2.084-1.673,2.503L9.321,5.542C8.309,5.961,7.143,5.729,6.368,4.954L6.343,4.929 c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l0.036,0.036c0.769,0.769,0.998,1.925,0.583,2.929L5.521,9.372 C5.113,10.357,4.151,11,3.085,11H3.084C2.447,11,2,11.447,2,12s0.447,1,1,1h0.068c1.076,0,2.047,0.648,2.459,1.644l0.021,0.049 c0.415,1.004,0.186,2.16-0.583,2.929l-0.036,0.036c-0.391,0.391-0.391,1.023,0,1.414s1.023,0.391,1.414,0l0.036-0.036 c0.769-0.769,1.924-0.998,2.929-0.583l0.143,0.06C10.389,18.9,11,19.815,11,20.83v0.085C11,21.553,11.447,22,12,22s1-0.448,1-1 v-0.17c0-1.015,0.611-1.93,1.55-2.318l0.252-0.104c0.938-0.389,2.018-0.174,2.736,0.545l0.119,0.119 c0.391,0.391,1.023,0.391,1.414,0s0.391-1.023,0-1.414l-0.119-0.119c-0.749-0.749-0.908-1.869-0.5-2.846 c0.007-0.017,0.014-0.032,0.021-0.049C18.872,13.669,19.782,13,20.835,13c0.052,0,0.08,0,0.08,0C21.553,13,22,12.553,22,12 S21.553,11,21,11z M8,13c-0.553,0-1-0.448-1-1c0-0.553,0.447-1,1-1s1,0.447,1,1C9,12.552,8.553,13,8,13z M13,16.5 c-0.553,0-1-0.448-1-1c0-0.553,0.447-1,1-1s1,0.447,1,1C14,16.052,13.553,16.5,13,16.5z M14,12c-1.104,0-2-0.896-2-2s0.896-2,2-2 s2,0.896,2,2S15.104,12,14,12z"></path>');

See here for more info: https://github.com/obsidianmd/obsidian-api/blob/master/obsidian.d.ts#L232-L238

3 Likes